ComponentDidMount 中调用的 setState 没有更新状态？ [复制]

Posted 2023-02-21

【中文标题】ComponentDidMount 中调用的 setState 没有更新状态？ [复制]

【英文标题】：setState called in ComponentDidMount is not updating the state? [duplicate]

【发布时间】：2018-07-25 21:25:40

【问题描述】：

我是 react-native 的新手，我在这里尝试在加载组件时更新状态。但是状态没有更新。

constructor(props) 
super(props);

this.state = 
 selectedSection: 'None',
 sectionObject:  index: 0, key: '',
 sectionIndex: 0,
 sectionArray: [],
 ;


componentDidMount()

 this.setState(
 sectionObject:  index: this.state.sectionIndex, key: this.state.selectedSection,
 sectionArray: this.state.sectionArray.concat(this.state.sectionObject),
 )
 console.log('sectionObject:',this.state.sectionObject);
 console.log('section array:',this.state.sectionArray);

我在这里做错了什么？

【问题讨论】：

你怎么知道状态没有更新？你在做一些日志记录吗？

@Prakashsharma，是的

setState 是异步的。 console.log 在setState 之后将显示旧状态。使用setState 回调。

您能告诉我您在这些控制台语句中得到的值是什么吗？

你需要像这样检查日志：this.setState(,()=>console.log(this.state))

【参考方案1】：

更新

componentDidMount 更新状态，但这是异步的，因此我认为您可以在渲染中看到更新的状态。

class Hello extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            selectedSection: 'None',
            sectionObject:  index: 0, key: '' ,
            sectionIndex: 0,
            sectionArray: [],
        ;
    

    componentDidMount() 
        this.setState(
            selectedSection: 'Wowowowowow',
        )
    

    render() 
        console.log(this.state.selectedSection)
        return <div>this.state.selectedSection</div>
    


ReactDOM.render(
    <Hello name='World' />,
    document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【讨论】：

componentDidMount() this.setState(prevState => ( sectionObject: ...prevState.sectionObject, index: this.state.sectionIndex,key:this.state.selectedSection ), () => console.log('sectionObject:',this.state.sectionObject); )

嘿，我已经在这里提供了解决方案！使用 setState 的函数形式总是好的。就我而言，我使用 prevState 作为参数和 props 以供参考。请记住，setState 调用是异步的。在您的情况下，您在 setState 执行完成之前在控制台日志中打印状态。因此，如果您正在打印状态，则在设置状态后立即可能无法获得当前值。相反，您始终会获得先前的状态值。因此，setState 的函数形式除了我在控制台中打印状态值的另一个参数。

【参考方案2】：

当您尝试在那里登录时，您可以看到旧值。尝试登录 setState 回调，如 this setState( key: value , () => console.log(this.state)); 。 看看这个：https://reactjs.org/docs/react-component.html#setstate , https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296