Javascript 使用React中的数组设置状态

我试图用一个函数在React中使用setState生成的数组替换一个最初为空的数组。我的构造函数中包含以下内容：

this.state = {
    sources: []
};

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

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

它不工作，仍然显示空（或原始）数组。我知道不能直接在React中将数组变异为state，但我不认为这是我在这里要做的。以下是我在研究这个问题时尝试过的一些其他方法，但都不奏效：

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

提前感谢您的帮助

编辑完整代码：

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

export类SrcMenu扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
资料来源：[]，
};
this.searchSources=this.searchSources.bind（this）；
}
搜索来源（）{
//注释掉用测试代码替换的实际方法
var temp=[0,1,2]；
log（temp）；//[0,1,2]，所以我知道这个方法是有效的
这是我的国家({
资料来源：temp//等我尝试过的其他东西
})
console.log（“this.state.sources:+this.state.sources）；//空
}
render（）{
返回(
//等等。。。
试验
);
}
}

下面是一个示例，它应该按照您的描述工作：

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

类ArrayTest扩展了React.Component{
构造函数（）{
超级（）；
此.state={
资料来源：[]，
};
}
公共渲染（）{
返回(
测试：{this.state.sources}
测试
);
}
private _changeValue=（）=>this.setState（{sources:[1,5]}）；
}
ReactDOM.render（
,
document.getElementById（'content'）
);

您的代码正在工作，但您没有考虑到

setState

是异步的。如果您在回调中记录

this.state

，该回调可以作为

setState

的第二个参数，它将保证它已更新

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

---

在这里工作-它不应该是构造函数中的

this.state（{sources:[]}；

，而是

this.state={sources:[]}

您能发布一个调用setState的方法的片段吗from@Tholle谢谢，这是我问题中的一个输入错误，在我正确编写的实际代码文件中。您能包括具有这种行为的整个组件吗？很难说您问题中当前的代码有什么错误。是否有

pJS类中的public

或

private

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

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

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