Question

使用此code，我可以在一个简单的对象上成功使用setState - 当我点击“Joey”时，名称会变为“Igor”。

    class Card extends React.Component {
        myFunc = () => {this.props.change('Igor')};
        render() {
            return (
                <p onClick={this.myFunc}>{this.props.name}</p>
            )
        }
    }

    class Parent extends React.Component {
        constructor(props) {
            super(props)
            this.state = { name: "Joey" }
        }

        toggle = (newname) => {
            this.setState((prevState, props) => ({
                name: newname
            }));
        }

        render() {
            return (
                <Card change={this.toggle} name={this.state.name} />
            );
        }
    }

但是这个code有多个嵌套在数组中的对象，setState要么无法将每个名称更改为“Igor”，要么必须以某种方式进行修改。

    class Card extends React.Component {

        myFunc = () => {this.props.change('Igor')};
        render() {
            return (
                <p onClick={this.myFunc}>{this.props.name}</p>
            )
        }
    }

    class Parent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                names: [
                    {
                        name: "Joey"
                    },
                    {
                        name: "Sally"
                    },
                    {
                        name: "Billy"
                    },
                ]
            }
        }

        toggle = (newname) => {
            this.setState((prevState, props) => ({
            // what can I put here to change the name I click on to "Igor"
            }));
        }

        render() {
            const names = this.state.names.map((name, index) => (
                <Card key={index} change={this.toggle} {...name} />
            ))

            return (
                <div>
                    {names}
                </div>
            );
        }
    }

即使我知道这不是setState的工作方式，但我尝试通过传递name然后撰写index来访问this.state.names[index].name: newname。这里没有惊喜，它没有用。

我已经研究过并且找不到关于此问题的类似问题，尽管我已经发现很多关于不变性帮助者的提及。但我仍然不确定这是否可行。

使用setState修改嵌套在数组中的对象的最佳方法是什么？

Answer 1

我会将其用于切换方法：

toggle = (nameYouWantChanged, nameYouWantItChangedTo) => {

  this.setState({
    names: this.state.names.map(obj => 
      obj.name === nameYouWantChanged
        ? { name: nameYouWantItChangedTo }
        : obj
    )
  })

}

Answer 2

修改了您的代码，可以找到工作示例here。

可以在此处找到更改：

toggle = (index, newname) => {
    this.setState((prevState, props) => ({
        // Return new array, do not mutate previous state.
        names: [
            ...prevState.names.slice(0, index),
            { name: newname },
            ...prevState.names.slice(index + 1),
        ],
    }));
}

render() {
    const names = this.state.names.map((name, index) => (
        // Need to bind the index so callback knows which item needs to be changed.
        <Card key={index} change={this.toggle.bind(this, index)} {...name} />
    ))

    return (
        <div>
            {names}
        </div>
    );
}

这个想法是你需要通过.bind将索引传递给回调函数，并返回一个带有修改名称的新state数组。您需要传递索引，以便组件知道要将name更改为newname的对象。

如何在React JS中使用嵌套在数组中的对象的`setState`？

2 个答案: