React中提交回复后如何实现实时更新显示？

核心问题是你直接从静态数组Queries中获取数据，提交回复后没有更新本地状态，导致页面无法自动重新渲染。按以下步骤修改即可：

1. 将静态数组转为React状态 #

把原本的Queries数组存入useState，后续更新状态时会自动触发页面重新渲染：

const { id } = useParams();
const [loading, setLoading] = useState(false);
// 把静态Queries转为状态变量
const [queries, setQueries] = useState(Queries);
// 用查询项的唯一id匹配（比索引更可靠）
const queryItem = queries.find((item) => item.id === parseInt(id)); 

2. 提交成功后更新本地状态 #

在Axios请求成功的回调里，把新回复添加到对应查询的回复列表中，更新状态：

const onSubmit = (e) => {
    e.preventDefault();
    setLoading(true);

    const params = JSON.stringify({
        id: userID,
        message: queryMessage,
    });

    Axios(`${api.baseURL}/replyquery`, {
        method: "POST",
        data: params,
        headers: { 'Content-Type': 'application/json' } // 确保后端能正确解析JSON
    })
        .then((res) => {
            setLoading(false);
            setQueryMessage("");
            
            // 更新状态，添加新回复
            setQueries(prevQueries => {
                return prevQueries.map(query => {
                    if (query.id === parseInt(id)) {
                        return {
                            ...query,
                            // 合并原有回复和新回复，确保reply是数组
                            reply: [...(query.reply || []), res.data]
                        };
                    }
                    return query;
                });
            });
        })
        .catch((err) => {
            console.log(err);
            setLoading(false);
        });
};

注：如果后端返回的是更新后的完整查询对象，直接替换对应项即可：

setQueries(prevQueries => prevQueries.map(q => q.id === parseInt(id) ? res.data : q))

3. 优化渲染逻辑（可选） #

确保reply始终是数组，避免map时出现错误：

<div className="px-4">
    {(queryItem?.reply || []).map((item, index) => (
        <div key={item.id || index}> {/* 优先用回复的唯一id作为key，性能更优 */}
            <div>
                <p>
                    <span>
                        <IoArrowRedo className="text-black" />
                    </span>
                    Replied by: {item?.replied_by?.name}
                </p>
                <p>{item?.reply_date}</p>
            </div>
            <p>{item?.reply_message}</p>
        </div>
    ))}
</div>

内容的提问来源于stack exchange，提问作者toney