Question

我正在使用React，我的状态被定义为一个对象数组。我需要能够只更改state.data数组中的一个特定元素，即id为1的示例对象。

我想知道：

在此方案中如何使用setState()的正确方法是什么。

constructor(props) {
  super(props);
  this.state = {
    data: [{
        id: 0,
        title: 'Buy a',
        status: 0, // 0 = todo, 1 = done
      },
      {
        id: 1,
        title: 'Buy b',
        status: 0,
      },
      {
        id: 2,
        title: 'Buy c',
        status: 0,
      }
    ]
  };
  this.onTitleChange = this.onTitleChange.bind(this);
}
onTitleChange(id, title) {
  console.log(id, title);
  debugger
}

Answer 1

您可以使用spread运算符克隆状态对象，然后使用findIndex方法查找具有给定id的数组中的对象索引修改对象并设置状态。

constructor(props) {
  super(props);
  this.state = {
    data: [{
        id: 0,
        title: 'Buy a',
        status: 0, // 0 = todo, 1 = done
      },
      {
        id: 1,
        title: 'Buy b',
        status: 0,
      },
      {
        id: 2,
        title: 'Buy c',
        status: 0,
      }
    ]
  };
  this.onTitleChange = this.onTitleChange.bind(this);
}
onTitleChange(id, title) {
   var data = [...this.state.data];
   var index = data.findIndex(obj => obj.id === id);
   data[index].title = title;
   this.setState({data});
}

Answer 2

您也可以修改自己的方式

以下列格式存储状态

为了方便，希望这会有所帮助！

constructor(props) {
  super(props);
  this.state = {
    data: [
     0: {
        id: 0,
        title: 'Buy a',
        status: 0, // 0 = todo, 1 = done
      },
     1: {
        id: 1,
        title: 'Buy b',
        status: 0,
      },
     2: {
        id: 2,
        title: 'Buy c',
        status: 0,
      }
    ]
  };
  this.onTitleChange = this.onTitleChange.bind(this);
}

onTitleChange(id, title) {
   var newData = [...this.state.data];
   newData[id].title = title;
   this.setState({newData});
}

Answer 3

一个简单的解决方案是：

const idx = this.state.data.findIndex(obj => obj === id);
this.state.data[idx].title = title;

对于更复杂的组件，我建议使用Immutable.js List

Answer 4

我会使用spread运算符来更新状态。

onTitleChange(id, title) {
  const { data } = this.state
  const index = data.findIndex(d => d.id === id)

  this.setState({
    data: [
      ...data.slice(0, index),
      {
        ...data[index],
        title: title,
      },
      ...data.slice(index + 1)
    ]
  })
}

Answer 5

您也可以这样做：

onChange = (id, value, field) => { 
    this.setState((prevState) => ({
            data: prevState.data.map((d, index) => { //d = object, index = index in array
                if (d.id === id) {
                    return {
                        ...d,
                        [field]: value //field/name in object
                    }
                }
                return d
            })
        }), () => {
            console.log("New value of", field, "=", value, "in object with id", id);
        });
}

如何使用setState

5 个答案: