在 React 中使用数组设置状态答案

【问题标题】：Setting state with an array in React在 React 中使用数组设置状态
【发布时间】：2018-12-25 06:52:33
【问题描述】：

我正在尝试用 React 中使用 setState 的函数创建的数组替换最初为空的数组。我的构造函数如下：

this.state = {
    sources: []
};

这会显示正确的数组（我用 [0,1,2] 对其进行了测试）。但是，当我尝试以这样的方法设置状态时：

this.setState({
    sources: [0,1,2]
})

它不起作用，仍然显示空（或原始）数组。我知道您不能直接在 React 中将数组更改为状态，但我不认为这就是我在这里所做的。以下是我在研究这个问题时尝试过的其他一些方法，但都没有奏效：

this.setState({
    sources: [...this.state.sources, 1]
})

...

this.setState({
    sources: this.state.sources.concat('test')
})

...

var temp = [0,1,2]
this.setState({
    sources: temp
})

提前感谢您的帮助！

编辑完整代码：

export class SrcMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            sources: [],
        };

        this.searchSources = this.searchSources.bind(this);
    }

    searchSources() {
    // commented out the actual method to replace with test code
        var temp=[0,1,2];
        console.log(temp); // [0,1,2] so I know the method works
        this.setState({
            sources: temp // etc for the other things i tried
        })
        console.log("this.state.sources: " + this.state.sources); // empty
    }

    render() {
        return(
        // etc...
          <button type="button" onClick={this.searchSources}>Test</button>
        );
    }
}

【问题讨论】：

在这里工作 - codesandbox.io/s/l7j005yknz
构造函数中不应该是this.state({ sources: [] };，而是this.state = { sources: [] };
你能发布一个你调用 setState 的方法的 sn-p
@Tholle 谢谢，这是我的问题中的错字，在实际的代码文件中我已经正确编写了
好的。您能否包括具有此行为的整个组件？很难说当前问题中的代码有什么问题。

标签： javascript arrays reactjs setstate

【解决方案1】：

您的代码正在运行，但您没有考虑到 setState 是异步的。如果您在回调中记录this.state，该回调可以作为setState 的第二个参数提供，它将保证它已更新。

this.setState({ sources: temp }, () => {
  console.log(this.state.sources);
});

【讨论】：

我们几乎每天都会看到同样的问题。为什么人们不使用渲染方法来记录状态？我阻止自己回答“使用渲染方法”而不是这个回调：）
@devserkan 当我开始使用 React 时，我自己就爱上了这个。我认为现在更好了，但是从文档中看它是异步的并不是那么明显。
那么，我猜我是幸运的 :)。是的，文档不是很清楚，我想我遵循了一些很好的教程，这就是我没有陷入这个问题的原因。

【解决方案2】：

这是一个应该按照您的描述工作的示例：

class ArrayTest extends React.Component {

  constructor() {
    super();
    this.state = {
      sources: [],
    };
  }

  public render() {

    return (
      <div>
      <div>test: {this.state.sources}</div>
      <button onClick={this._changeValue}>test</button>
       </div>
    );
  }

  private _changeValue = () => this.setState( {sources: [1,5] } );  
}

ReactDOM.render( 
  <ArrayTest />,
  document.getElementById('content')
);

【讨论】：

JS 类中有public 或private 吗？