Question

以下是我的状态。

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

};

我需要使用setState在ID为1的用户中添加新单词。

Answer 1

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

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

Answer 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>

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

Answer 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']}}
    })
})

如何在React的不可变状态下向数组添加项目？

3 个答案: