Javascript React useState：将子数组推入数组

Am使用基于函数的组件，并且在将子阵列推入useState阵列时遇到问题。 我的代码如下所示。有一个名为mode的数组来自道具，我需要将其附加为more的子数组

const ViewCharts = (props) =>{

//other codes

let [more,setMore] = useState([])

useEffect(()=>{
        console.log(props.mode,' mode array')
        let temp = [...more,props.mode]
        console.log(temp, ': this will append to more')
        setMore(temp)
        setTimeout(()=>{
            console.log(more,'after setting')
        },2000)
},[//some value])

}

当道具模式有价值['top'，'bottom']时，我希望更多的会有['top'，'bottom']]的价值，下一次如果道具模式是['top']，我需要更多的来拥有['top'，'bottom bottom'].[/strong>。但这就是我运行上述代码时得到的结果

[“顶部”]模式阵列

[“top”]：这将附加到“更多”

[]：“设置后”

---

为什么setMore即使在temp具有预期值时也不添加数组。

如果我没有记错，

useState

变量将在您设置它时在下一次渲染中更改值。您正在尝试在更改它的同一渲染中读取新的

更多

值（当您以相同的效果阅读它时，您已经在中设置了值），这将是

[]

第一次，因为这是您初始化它的方式

尝试创建第二个

useffect

和

more

依赖项，以查看它是否为您提供了所需的值：

//您也可以在返回之前只使用console.log（），不需要“useffect”来查看值是否确实更改。
React.useffect（（）=>{
log（'More:'，More）；
}，[更多]；

第9行：当用户单击时，我们使用一个新值调用setCount。React然后将重新呈现示例组件，并将新的count值传递给它

---

我建议阅读hooks API以更好地理解它们是如何工作的。

是否使用prev state值解决了您的问题？正如它所示：编辑setMore（temp）到setMore（prevMore=>（[…prevMore，props.mode]），并且不再使用temp变量您熟悉吗？