在 React 中使用数组设置状态

Posted 2023-02-22

【中文标题】在 React 中使用数组设置状态

【英文标题】：Setting state with an array in 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 谢谢，这是我的问题中的错字，在实际的代码文件中我已经正确编写了

好的。您能否包括具有此行为的整个组件？很难说当前问题中的代码有什么问题。

【参考方案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 吗？