Reactjs React js:runeffects（useffect）与常见问题同步运行

我设置了两个效果来实例化无状态react组件中的一些值。但是，我似乎无法访问第二个函数中第一个函数的数据集

据我所知，这些函数可能是异步运行的，因此不能保证每个函数何时运行当具有共同关注点的效果相互依赖时，如何使它们同步运行？或者，在无状态react组件中替换

构造函数

是否有更好的做法

相关代码：

const [roadTiles, setRoadTiles] = useState([]);

...

useEffect(() => {
    populateRoadTiles(); // calls setRoadTiles() -- console.log shows roadTiles has been set
    populateRoadTileDivs(); // uses roadTiles -- roadTiles is still [] and causes index error
}, [])

我四处寻找类似的问题，但大多数解决方案都归结为用户代码中的个别错误。希望这能更好地提炼出这个问题

编辑：

链接依赖项似乎是基于和文档的方法

然而，我仍然遇到同样的问题。也许这是我在populateRoadTiles中的逻辑问题（见下文）。文档似乎表明set*（）函数也是异步的，因此在

populateRoadTiles

之后，roadTiles仍然处于未设置状态是有意义的

但是，在新的依赖结构中，

populateRoadTileDivs

最终被调用。这似乎表明应设置路砖并触发第二个效果

    const populateRoadTiles = () => {
        const newRoadTiles = new Array(height);
        for (let r = 0; r < height; r++) {
            newRoadTiles[r] = new Array(width);
        }
        for (let r = 0; r < height; r++) {
            for (let c = 0; c < width; c++) {
                newRoadTiles[r][c] = (
                    <RoadTile
                        onClick={() => getNeighbors(r, c)}
                        type={RoadTileType.EMPTY}
                    />
                );
            }
        }
        setRoadTiles(newRoadTiles);
        console.log(newRoadTiles); // populated array
        console.log(roadTiles); // []
    };

constpopulateroadtiles=（）=>{
const newRoadTiles=新阵列（高度）；
for（设r=0；r
);
}
}
设置路砖（新路砖）；
console.log（新路砖）；//填充数组
控制台。日志（路砖）；//[]
};

使用

usemo

作为

Reactjs

试试这个

useMemo(() => {
    populateRoadTiles(); // calls setRoadTiles() -- console.log shows roadTiles has been set
    populateRoadTileDivs(); // uses roadTiles -- roadTiles is still [] and causes index error
}, [])

应用程序编程接口： 例子：

---

每个

useffect

都有[

依赖关系

]或没有

[]

=

组件安装

React在其依赖项更改后运行效果

const [roadTiles, setRoadTiles] = useState([]);
const [roadTilesDivs, setRoadTilesDivs] = useState([]);

...

useEffect(() => {
    populateRoadTiles(); // calls setRoadTiles() -- console.log shows roadTiles has been set
}, [])

useEffect(() => {
    populateRoadTileDivs(); // uses roadTiles -- roadTiles is still [] and causes index error
}, [roadTiles]) // <- add dependency here

---

这个解决方案很有意义，并且符合我在文档中看到的内容。然而，我仍然遇到同样的问题。我用更多的细节更新了我的原始帖子。我还没有在你更新的代码中看到任何错误。但我不太了解您的任务。我认为问题可能是roadTiles最初是通过

useState（[]）

更新的。如果我将以下代码添加到populateRoadTileDivs（）：

console.log（roadTiles）；如果（！roadTiles | |！roadTiles.length）{return；}

我看到最初的roadTiles是一个空数组，然后在populateRoadTileDivs（）的第二次调用中填充。这是对useEffect中的路面砖依赖关系的准确理解吗？您是否确保“宽度”和“高度”相关？是的。设置了宽度和高度，我看到使用上面的逻辑填充网格。不过，这感觉有点像黑客。

    setRoadTiles(newRoadTiles); 
    console.log(newRoadTiles); // not actual, but it will be correct 
    console.log(roadTiles); // [] actual but it's prematurely.