React 动态改变状态列表异步问题

Posted 2023-02-22

【中文标题】React 动态改变状态列表异步问题

【英文标题】：React dynamically mutating a state list async problem

【发布时间】：2019-02-13 06:16:46

【问题描述】：

我对 React 还是很陌生，我目前正试图多次附加到我所在州的列表中。但是，状态似乎没有更新，我怀疑这可能是由于异步（？）。我将不胜感激任何指针:-)

this.state = 
    data: []
;

var json = name: "default", cost:1

for (var i = 0; i < 3; i++) 
        this.setState( data: [...this.state.data,json] );
    

上面的代码打印了这个：

[]  
[]
[name: "default", cost: 1]

编辑：更多代码

componentWillMount() 
    for (var i = 0; i < 3; i++) 
        this.setValue(this.props.data[i]);
    


setValue(rowData) 
    let 
        checkbox: checkbox,
        checked: checked,
        data: data,
        name: name,
        headers: headers
     = this.props;
    var json = ;
    for (var i = 0; i < headers.length; i++) 
        json[headers[i]] = rowData[i];
    
    json["checked"] = checked;
    this.setState(prevState =>  data: [...prevState.data, json] );
     console.log(this.getValue()) 

【问题讨论】：

您无法在 setState 之后读取状态值 - 将 console.log(this.getValue()) 放入 render

【参考方案1】：

setState() 是异步的，所以你不能保证它会在下次调用 setState() 时更新。

我会将您的代码更改为首先使用数据创建数组，然后在完成后调用 setState()。看起来像这样：

componentWillMount() 
    var data = [];
    for (var i = 0; i < 3; i++) 
        data.push(this.getValue(this.props.data[i]));
    
    this.setState(data);


getValue(rowData) 
    let 
        checkbox: checkbox,
        checked: checked,
        data: data,
        name: name,
        headers: headers
     = this.props;
    var json = ;
    for (var i = 0; i < headers.length; i++) 
        json[headers[i]] = rowData[i];
    
    json["checked"] = checked;
    return json;

【参考方案2】：

你应该使用this.setState()的函数形式。

this.state = 
    data: []
;

var json = name: "default", cost:1

for (var i = 0; i < 3; i++) 
    this.setState(prevState => ( data: [...prevState.data,json] ));

更多信息在这里：https://reactjs.org/docs/react-component.html#setstate

【讨论】：

感谢您的回复！我已经换到this.setState(prevState => data: [...prevState.data, json] );，但它似乎仍然没有更新我的列表。现在它打印[] [] []。似乎列表现在根本没有更新:-(

你用console.log记录这个吗？还是你在某处打印出来？

我用console.log记录它，我不应该吗？

不，没关系，但是您究竟在哪里记录呢？你能告诉我完整的文件代码吗？

感谢您的帮助！它为我清除了很多东西:-)