javascript - 如何在向每个数组添加键值时设置状态

Question

我试图在向数组添加键值时设置状态。我关注了几个问题，包括这个: How to add a new key value to react js state array?

我无法获得任何这些答案来应对我的挑战。

我的状态是这样的:

this.state = { jsonReturnedValue: [] }

当 componentDidMount() 发出获取请求时，我添加了新状态和 foreach 循环(根据上面问题的说明)

  componentDidMount() {

    let newState = [...this.state.jsonReturnedValue];
    newState.forEach(function(file) {
      file.selected = "false"
    })

    fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
      .then(response => response.json())
      .then(json => {
      this.setState({ jsonReturnedValue: [...this.state.jsonReturnedValue, ...json.printCategory.products] }, () => console.log(this.state));
      })
      .then(this.setState({jsonReturnedValue: newState}, () => console.log("selected added" + this.state) ));
  }

我想我只需使用键值对再次设置状态，因此我第三次添加了 .then，但它不起作用。

最终控制台日志返回以下内容:选择添加[对象对象]深入研究后发现该对象是空的。

编辑:我的目标是通过 api 调用设置状态，同时向每个数组添加键值“selected: false”。

Answer 1

componentDidMount 仅运行一次，即第一次安装组件时，即在数据调用之前。获取数据并调用 setState 后，update lifecycle methods正在运行。

假设您使用的是新版本的 React，您需要拦截 getDerivedStateFromProps 中的状态更改:

getDerivedStateFromProps(props, state) {
  // `state` will be the new state that you just set in `setState`
  // The value returned below will be the new state that the `render`
  // method sees, and creating the new state here will not cause a re-render
  return state.jsonReturnedValue.map((file) => {
    file.selected = "false";
    return file;
  });
}

现在，理想情况下您实际上不想在那里执行此操作，而是在获取数据后执行此操作:

fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
      .then(response => response.json())
      .then(json => {
        // NOTE: it's unclear from your post exactly what the data structure is
        // Is it product.file, or is `product` also `file`?
        const products = json.printCategory.products.map((product) => {
          product.file = "selected";
          return product;
        });

        this.setState(
          {
            jsonReturnedValue: [...this.state.jsonReturnedValue, ...products],
          },
          () => console.log(this.state)
        );
      });