如何更新地图的javascript数组答案

【问题标题】：how to update javascript array of map如何更新地图的javascript数组
【发布时间】：2023-02-21 19:02:41
【问题描述】：

我有一个更新组件状态的 handleClick() 函数。

handleClick = () => {
    let temp_map = new Map();
    temp_map.set('left', null);
    temp_map.set('bottom',null);
    temp_map.set('right', null);
    temp_map.set('top', null);
    var dots = Array(75).fill(temp_map);
    // dots[24]['left'] = 23;
    console.log(dots[23])
    dots[24].set('left', 23);
    dots[23].set('right', 24)
    this.setState({dots: dots});
    console.log(dots)
    console.log(this.state.dots)
}

在上面的代码中，我创建了一个大小为 75 的数组，并用带有键值对的映射填充它们。

    dots[24].set('left', 23);
    dots[23].set('right', 24);

我做 console.log(dots) 我得到以下信息：

dots 数组的 75 个位置中的所有地图如何获得其左键更新？在我打电话之后 this.setState({dots: dots}); 然后执行 console.log(this.state.dots) 我得到以下信息：

为什么不更新状态。非常感谢任何帮助。

【问题讨论】：

数组中的所有项目都是对同一个 Map 对象的引用。您应该为数组中的每个项目创建一个 new Map。 setState 是异步的。这意味着当您记录它时，它可能还没有更新。使用生命周期挂钩记录状态变化。
这回答了你的问题了吗？ Array.prototype.fill() with object passes reference and not new instance

标签： javascript reactjs

【解决方案1】：

简短的回答，设置状态并在同一个函数中使用它的值可能行不通，因为它还没有更新。

设置值后，在依赖于它的单独 useEffect 挂钩中使用该值。

useEffect(() => {
   console.log(dots);
}, [dots])

【讨论】：