如何在 React 的不可变状态下将项目添加到数组中？答案

【问题标题】：How can I add items to array in React's immutable state?如何在 React 的不可变状态下将项目添加到数组中？
【发布时间】：2019-08-06 15:23:44
【问题描述】：

以下是我的状态。

this.state = {
  text: "",
  users: [
    {id:1, name:"nawaf", words:["sami","nawaf"] },
    {id:2, name:"khaled", words:["sad","ramy"] },
  ]

};

我需要通过 id 1 使用setState 在用户中添加新词。

【问题讨论】：

Whats the best way to update an object in an array in ReactJS?的可能重复

标签： javascript reactjs

【解决方案1】：

您可以映射用户对象并更新相关用户，例如：

this.setState(state => ({
  ...state,
  users: state.users.map(user => user.id === 1 ? {
    ...user,
    words: [...user.words, 'new', 'words']
  } : user)
}))

【讨论】：

【解决方案2】：

你可以像这样向用户添加一个单词（假设传入的单词是一个新单词数组）

addWords = (i, words) => {
    this.setState(prevState => {
        return {
            users: [...prevState], 
            users[i]: {
                ...prevState.users[i], 
                words: [...prevState.users[i].words, ...words]
            }
        }
    })
}

那就这样称呼吧

<button onClick={() => this.addWords(userIndex, ["new","word"])}>
    Add words
</button>

这样您就可以向任何用户添加单词

【讨论】：

【解决方案3】：

您可以使用 immutability-helper 之类的库或使用 es6：

// ES6
const users = this.state.users.map(user => 
     user.id === 1 ? {...user, words: ['new', 'words', 'can', 'be', 'push', 'here']} : user)
this.setState({users})

使用 immutable-js 会像：

import update from "immutability-helper";

this.setState({
    users: update(this.state.users, {
        [1]: {words: {$push: ['new', 'items']}}
    })
})

【讨论】：