Question

我要在rules状态下从api保存这些对象，我需要为该状态内的每个对象添加一个称为editable的新字段。试过这个，但是什么也没做。

componentDidMount() {
    Api.getRules(this.state.brand,
                this.state.model,
                this.state.version,
                this.state.minYear,
                this.state.maxYear,
                this.state.minKm,
                this.state.maxKm,
                this.state.page + 1,
                this.state.rowsPerPage).then((data) => {
      if (data) {
        this.setState({
          rules: data.body,
        });
      }
    });
    this.addEditableField();
    
  }

addEditableField = async () => {
    let teste = this.state.rules
    teste.map((rule)=>{rule["editable"]=false})
    await this.setState({ rules: teste })
  }

Answer 1

更改

if (data) {
    this.setState({
        rules: data.body,
    });
}

到

if (data) {
    this.setState({
        // this dumps all of the rule properties into a new object and
        // adds the new fields at the end of it
        rules: data.body.map(rule => ({...rule, editable: false })),
    });
}

addEditableField不是异步方法。它不是在进行ajax调用。

Answer 2

我发现您的实施中存在一些问题

addEditableField被从错误的地方呼叫。因为将在从后端获取响应之前调用此方法。因此，一旦获取了响应，只有状态会使用没有editable字段的实际响应进行更新。
没有从taste.map内部的addEditableField返回任何内容
将再次从状态中获取的rules设置为该状态

在获取响应后，即在addEditableField内尝试调用Api.getRules(....).then()，如下所示

Api.getRules(this.state.brand,
  this.state.model,
  this.state.version,
  this.state.minYear,
  this.state.maxYear,
  this.state.minKm,
  this.state.maxKm,
  this.state.page + 1,
  this.state.rowsPerPage).then((data) => {
  if (data) {
    addEditableField(data.body);
  }
});

addEditableField = async(rules) => {
  let teste = rules.map((rule) => {
    rule["editable"] = false;
    return rule;
  });
  this.setState({
    rules: teste
  })
}

addEditableField方法也可以如下简化

addEditableField = async(rules) => {
  this.setState({
    rules: rules.map(rule => ({
      ...rule,
      editable: false
    }))
  })
}

向对象的状态数组添加新字段

2 个答案: