在 React 生命周期内更新状态不起作用

Question

所以最初的问题是这样的，我有一个组件选择导入到登录组件中的语言，当onChange事件我击中API时，从语言组件中，然后从API的响应放入本地存储中，当我从本地存储中检索要在登录组件中调用的数据并进入登录组件状态时， 数据没有更新为本地存储，但是如果本地存储数据更新成功，如何更新生命周期中的状态 React？

这是组件登录的状态

constructor(props){
super(props)
this.state = {
getDataLocal:[]
}
}

我想从本地存储中获取数据并更新到状态

componentDidUpdate(){
//set state and get data from localstorage
this.setState({
getDataLocal:JSON.parse(this.props.resGet('toLocalPages')),
loading:false
})
}

更新失败，仍包含一个空数组

render() {
const { loading,getDataLocal} = this.state
//getDataLocal unsuccessfully updated and still contains an empty array
console.log(getDataLocal)
if(this.state.redirect){
return <Redirect to='/home' />
}
//untuk menghandle data di localstorage
if(this.props.resGet('data')){
return <Redirect to='/home' />
}
if(loading){
return(
<p>loading</p>
)
}else{
return (
<React.Fragment>
<Container>
<Padding />
<Row>
<Col md={{ span: 6, offset: 3 }} className='mx-auto'> 
<Card>
<CardContent>
<Row>
<Col xs={12}>
<h3><b>{getDataLocal.page_login.title}</b></h3>
<p><b>{getDataLocal.page_login.subtitle}</b></p>
<br />
</Col>
</Row>
<Form onSubmit={this.handleSubmit}>
<SelectLanguage />
<Form.Group controlId='formBasicEmail'>
<Form.Label><b>{getDataLocal.page_login.label1}</b></Form.Label>
<Form.Control type='email' name='MEMBER_EMAIL' placeholder={getDataLocal.page_login.placeholder_label1} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId='formBasicPassword'>
<Form.Label><b>{getDataLocal.page_login.label2}</b></Form.Label>
<Form.Control type='password' name='MEMBER_PASSWORD' placeholder={getDataLocal.page_login.placeholder_label2} onChange={this.handleChange} />
</Form.Group>
<p className='text-muted float-right'><b>{getDataLocal.page_login.forgot_password}</b></p>
<Button type='submit' variant='warning' className='text-white' size='md' block >{getDataLocal.page_login.button}</Button>
</Form>
<br/>
<p className='text-muted text-center'><b>Or</b></p>
<p className='text-primary text-center'><b><i className='fa fa-facebook-official' aria-hidden='true'></i>&nbsp;{getDataLocal.page_login.link_login}</b></p>
<br />
<p className='text-muted text-center'><b>{getDataLocal.page_login.text2}&nbsp;<Link to='/register'><span className='text-warning'>{getDataLocal.page_login.link_register}</span></Link></b></p>
</CardContent>
</Card>
</Col>
</Row>
</Container>
</React.Fragment>
)
}
}
}

Answer 1

你可以立即在 componentDidUpdate(( 中调用 setState((，但请注意它必须包装在一个条件中。 注意- 如果返回 false，则不会调用componentDidUpdate()shouldComponentUpdate()。

• https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

两件事，首先你不能直接调用componentDidUpdate，你必须检查组件的props或state是否更改以执行某些操作，其次，你试图分配一个你一开始没有定义的状态loading，你做这样的事情：

state = {
getDataLocal: [],
loading: false
}
componentDidUpdate(prevProps) {
const { resGet } = this.props;
if (prevProps.resGet('toLocalPages') !== resGet('toLocalPages')) {
// Set state and get data from localstorage
this.setState({
getDataLocal: JSON.parse(resGet('toLocalPages')),
loading: false
})
}
}

希望这有帮助。

Answer 3

我想问题是更改道具不会调用渲染。似乎getDerivedStateFromProps会帮助你，因为它以前在同样的情况下帮助了我。

static getDerivedStateFromProps(props, state) {
return{
getDataLocal:JSON.parse(this.props.resGet('toLocalPages'))
};
}

试试吧，让我知道它是否有效。