react-router-dom使用navigate()跳转后状态变更未触发组件渲染的问题

兄弟我看了你的代码，核心问题出在异步请求的时序上！

你现在的流程是这样的：
当从其他页面跳转到BuildBoxPage时，组件会先执行挂载阶段的两个useEffect：一个发起fetchBoxes请求（异步，需要等接口返回数据），另一个监听state的变化。这时候state有值，会立刻调用updateBox，但此时boxes还是初始的空数组，boxes.find根本找不到对应的box，所以box一直是undefined，自然不会渲染BuildBoxForm。

而当你在当前页面导航时，boxes已经提前加载完成了，所以updateBox能正常找到box，渲染就没问题。

给你两个可行的解决方案：

方案一：让updateBox在boxes加载完成后再执行 #

修改监听state的useEffect，把boxes加入依赖数组，这样当boxes从接口加载完成后，只要state存在，就会重新执行updateBox，这时候就能找到对应的box了：

useEffect(() => {
    // 加上boxes长度判断，避免空数组时无效查找
    if (state != undefined && boxes.length > 0) {
        updateBox(state.barcode)
    }
}, [state, boxes]); // 这里新增boxes作为依赖

方案二：在fetchBoxes完成后处理state里的条码 #

直接在获取到boxes数据后，检查是否有state传入的条码，如果有就立刻更新box，这样能确保操作时boxes已经有数据了：

useEffect(() => {
    const fetchBoxes = async () => {
        try {
            const res = await fetch('/food/box/v1/boxes', {
                method: "GET",
                headers: {
                    // 这里注意修正：原来的ContentType写错了，应该是带引号的"Content-Type"
                    "Content-Type": "application/json"
                },
            });
            const data = await res.json();
            setBoxes(data.boxes);
            
            // 新增：当boxes加载完成后，检查是否有state条码，有的话更新box
            if (state?.barcode) {
                updateBox(state.barcode);
            }
        } catch (error) {
            console.log("Error fetching boxes", error);
        }
    }
    fetchBoxes();
}, [state]); // 加上state作为依赖，确保state变化时重新执行

另外提个小细节：你fetchBoxes里的请求头ContentType写错了，应该是"Content-Type"，少了引号和横线，可能会导致接口请求异常，记得修正哦~

备注：内容来源于stack exchange，提问作者Andreas