Question

class Search extends React.Component {
  constructor() {
    super();
    this.state = {
      searchResult: {
        "sr": []
      }
    }

    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.setState = this.setState.bind(this)

  }

  onSubmit = formProps => {
    console.log(formProps.searchItem);
    cryptoSearch.searchNames(formProps.searchItem)
      .then((names) =>
        console.log(names),
        this.setState({
          sr: { names }
        }),
        console.log(this.state.sr)
      ) // [ 'BTC Lite', 'BTCMoon' ]
      .catch(err => console.log(err))

  };


  handleChange(e) {
    this.setState({ errorMessage: '' });
  }

我想使用onsubmit函数显示来自api的搜索结果。我在构造函数和onSubmit函数中声明了一个名为sr的数组，当我使用一个包（类似于axios）获取一个名称（响应）数组对象时，如何将names数组插入到sr数组中？

Answer 1

当我假设响应中的names是一个数组时，您可以简单地设置状态。

this.setState({
   sr: names
 },()=>{ console.log(this.state.sr);});

然后您可以在setState的回调中验证setState是异步类型。

Answer 2

如果data: [ { "label": "Inprogress", "value": "<%=cummulativeInprogress%>" }, { "label": "Completed", "value": "<%=cummulativeCompleted%>" }, { "label": "Aborted", "value": "<%=cummulativeAborted%>" }, { "label": "Failed", "value": "<%=cummulativeFailed%>" }, { "label": "Cancelled", "value": "<%=cummulativeCancelled%>" }, { "label": "Amending", "value": "<%=cummulativeAmending%>" } ] } }).render(); })是一个数组，并且您想使用该数组更新names属性，则可以使用ES6扩展运算符并按以下方式设置状态：

sr

如果像代码中那样直接使用this.setState(prevState => ( { searchResult: { ...prevState.searchResult, sr: names } } ) );设置状态，则会丢失sr的其他属性，并且状态形状也会发生如下变化：

searchResult

另一点是，如果在设置状态后立即用console.log记录状态，则setState是异步的，因此无法获得正常的结果。而是为此使用回调：

this.state = {
     "sr": []
}

或不要打扰在这里记录回调，并在您的render方法中进行记录：

this.setState(prevState => ( {
            searchResult: { ...prevState.searchResult, sr: names }
        } ), () => console.log(this.state.searchResult.sr)
    );

Answer 3

如果names是一个数组，则可以将其设置为状态

onSubmit = formProps => {
console.log(formProps.searchItem);
cryptoSearch.searchNames(formProps.searchItem)
  .then((names) =>
    this.setState({
      sr: names 
    }),
  ) 
  .catch(err => console.log(err))

};

在react中，将响应数组插入setState

3 个答案: