Question

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

this.state = {
    sources: []
};

这将显示正确的数组（我用[0,1,2]对其进行了测试）。但是，当我尝试使用类似方法的setState时：

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>
        );
    }
}

Answer 1

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

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

Answer 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')
);

在React中使用数组设置状态

2 个答案: