javascript - 如何从对象数组更新单个值然后更新状态

Question

我有一个对象数组

const array = [
  { itemId: "optionOne", name: "Option One", quantity: 10 },
  { itemId: "optionTwo", name: "Option Two", quantity: 20 },
  { itemId: "optionThree", name: "Option Three", quantity: 30 }
];

我只需要使用输入框更新数量，然后更新状态。 以这样的事情结束

最好的方法是什么。

请找到附加的代码示例准备好修改 handleChange() 函数 CodeSandbox

Answer 1

如果要存储和更新状态，则需要将数据添加到组件状态。这可以在构造函数中完成，然后在任何组件方法中使用 setState() 进行修改(即，如果您从 API 获取数据，或使用更改处理程序进行修改)。该组件看起来像这样:

constructor(props) {
  super(props);
  // set initial state, set to { array: [] } if getting data from API
  this.state = {
    array: [
      { itemId: "optionOne", name: "Option One", quantity: 10 },
      { itemId: "optionTwo", name: "Option Two", quantity: 20 },
      { itemId: "optionThree", name: "Option Three", quantity: 30 }
    ]
  };
}
handleChange = (itemIndex, itemValue) => {
  console.log(itemIndex, itemValue);
  // set state to changed values
  this.setState({
    array: this.state.array.map((item, index) => {
      // update item quantity (or clone & mutate if you need to maintain immutability)
      if (index === itemIndex) { item.quantity = +itemValue };
      return item;
    })
  });
};
render() {
  return (
    <div>
      {this.state.array.map((item, key) => {
        return (
          <FormGroup controlId="siteVisit">
            <Row>
              <Col xs={12} md={4}>
                <h3>{item.name}</h3>
              </Col>
              <Col xs={12} md={8}>
                <FormControl
                  type="text"
                  key={item.itemId}
                  onChange={item => {
                    this.handleChange(key, item.target.value);
                  }}
                />
                <span>{item.quantity}</span>
              </Col>
            </Row>
          </FormGroup>
        );
      })}
    </div>
  );
}

编辑

虽然上述解决方案相对简单，但根据您的应用程序结构，使用 "event emitter"-like function 可能更有意义你通过的那个被调用。这样，就不需要在子组件中存储或更新状态——它变得无状态且纯粹是表现形式。所有数据突变/更新都将发生在父级上，并简单地传递给子级进行显示。想要这样做的主要原因是数据发生变化并且新数据从父级发送下来。如果您没有监听/响应子 Prop 的变化，这些变化将永远不会触发子组件的更新，除非您明确地监听这些变化，在这种情况下，您正在复制代码。无论如何，对于这个简单的例子来说可能有点过分了，但它值得思考。