Javascript 如何通过添加存储项来设置状态

我正在使用react和redux执行一个todo列表项目。我设法将我的todo id和它本身发送到本地存储。现在，当我使用componentDidMount生命周期方法打开站点时，我尝试将存储加载到UI

但是，我只能将存储阵列中最后一个存储项中的一个发送到我的状态。我如何处理这种情况

这是我的密码：

getElementsFromStorage = () => {
    let elements;

    if (localStorage.getItem('elements') === null) {
        elements = [];
    } else {
        elements = JSON.parse(localStorage.getItem('elements'))
    } return elements
}

componentDidMount() {
    const elements = this.getElementsFromStorage();

    elements.forEach(element => {
        this.setState({
            storageHolder: [...this.state.storageHolder, element]
        })
    })
}

在我做了之后

this.setState({ storageHolder: elements })

---

它成功了。

初始的

this.state.storageHolder

将是一个空数组，对吗？那么为什么不简单：

this.setState（{storageHolder:elements}）

？如果你想追加，你必须使用一个函数：

this.setState（state=>（{storageHolder:[…state.storageHolder，element]}））

（）非常感谢兄弟。我不能这样想我不知道为什么xD。现在它成功了。再次感谢。欢迎：）您可以显示

localStorage.getItem（'elements'）的控制台吗？（4）[{…}，{…}，{…}，{…}，{…}，{…}]0:{id:“AuV-A5W5FY2SITWZGQCKI”，todo:“todo1”}1:{id:“vik8wkoXbp8PsIoP03QhI”，todo:“todo2:{id:“7RJFATRZNPKEY1BAI98”，todo:“todo3:{id:“GQUURIKSFEKSCYMX1”，todo:“todo4:PROTODO4:数组长度：}