React中useEffect监听对象数组属性变化未触发重渲染问题求助

问题核心原因 #

你当前的问题本质是评论提交成功后，没有触发本地sale状态的更新：你写的useEffect仅依赖路由参数id，只有id发生变化时才会重新拉取商品详情；评论提交后id没有变化，且你没有主动更新sale状态的引用，所以页面不会重渲染。

解决方案1：提交后直接本地更新状态（性能最优） #

评论提交成功后，用不可变更新的方式修改sale的comments字段，生成新的状态引用触发重渲染，不需要重新请求接口：

// 你的评论提交处理函数示例
const handleCommentSubmit = async (formData) => {
  // 调用评论提交接口，接口会返回新创建的评论完整对象
  const newComment = await BoonelistApi.postComment(sale.id, formData);

  // 用函数式更新拿到上一次的sale状态，生成全新的sale对象和comments数组
  setSale(prevSale => ({
    ...prevSale,
    comments: [...prevSale.comments, newComment]
  }))
}

这里用扩展运算符生成新对象和新数组，没有修改原state，完全符合React的状态更新原则，新的引用会被React检测到，自动触发重渲染展示新评论。

解决方案2：提交后重新拉取最新详情（数据最准确） #

如果需要同步后端最新的所有数据（比如存在其他用户同时发评论的场景），可以把拉取详情的逻辑提取到useEffect外，提交成功后手动调用即可：

function SalesDetail() {
    const { id } = useParams();
    const currentUser = useContext(UserContext);
    const route = 'sales'
    const [sale, setSale] = useState()

    // 把拉取详情的逻辑提取到外层，方便多处调用
    const fetchSaleDetail = async () => {
        const res = await BoonelistApi.getSale(id)
        setSale(res)
    }

    // 页面首次加载、id变化时拉取数据
    useEffect(() => {
        fetchSaleDetail();
    }, [id]);

    // 评论提交逻辑
    const handleCommentSubmit = async (formData) => {
        await BoonelistApi.postComment(sale.id, formData);
        // 提交成功后重新拉取最新数据，自动更新状态
        await fetchSaleDetail();
    }
}

之前尝试无效的原因 #

你把sale.comments加入useEffect依赖没有效果，是因为你始终没有更新过sale状态的引用，sale.comments的引用也一直没有变化，useEffect的依赖检测自然不会触发。只有通过setSale赋值一个新的对象，React才会识别到状态变更，触发后续的重渲染逻辑。

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