我有一个 es6 react 组件,我希望状态的初始值取决于传递的 prop 的初始值,但它的值始终为 false:
AttachStateToProps 组件
<AttachStateToProps VALUE=false />
AttachStateToProps 组件:
class AttachStateToProps extends React.Component {
state = {
stateValue: this.props.VALUE,
}
render() {
console.log('Value of Prop - ', this.props.VALUE)
console.log('Value of State - ', this.state.stateValue)
return null
}
}
每次更改 Prop VALUE 的值时,我都会得到:
`Value of Prop - false` // this changes whenever I change prop value in
<AttachStateToProps />
和
`Value of State - false` // this does not change accordingly.
我图 it could be something to do with state/setState being async及以上
getinitialState
但我不明白为什么。
最佳答案
从构造函数中的 props 或作为类属性初始化状态,不会在 prop 更改时更新状态。然而,react 会检测到 prop 的变化,并重新渲染组件。
示例:
class AttachStateToProps extends React.Component {
state = {
stateValue: this.props.VALUE,
}
render() {
console.log('Value of Prop - ', this.props.VALUE)
console.log('Value of State - ', this.state.stateValue)
return null
}
}
const renderWithVal = (val) => ReactDOM.render(
<AttachStateToProps VALUE={val} />,
demo
);
renderWithVal(5);
renderWithVal(15);
renderWithVal(115);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
要在 prop 更改时更新状态,您需要使用组件的 lifecycle method .
使用 React ^16.3,您可以使用静态
getDerivedStateFromProps()
从 props 更新状态的方法(并初始化它):static getDerivedStateFromProps(nextProps) {
return {
stateValue: nextProps.VALUE,
}
}
class AttachStateToProps extends React.Component {
state = {};
static getDerivedStateFromProps(nextProps) {
return {
stateValue: nextProps.VALUE,
}
}
render() {
console.log('Value of Prop - ', this.props.VALUE)
console.log('Value of State - ', this.state.stateValue)
return null
}
}
const renderWithVal = (val) => ReactDOM.render(
<AttachStateToProps VALUE={val} />,
demo
);
renderWithVal(5);
renderWithVal(15);
renderWithVal(115);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
对于 16.3 之前的 React 版本,您可以使用
componentWillReceiveProps()
.注意:componentWillReceiveProps 已弃用,但会一直工作到版本 17。
componentWillReceiveProps(nextProps, prevState) {
this.setState({
stateValue: nextProps.VALUE,
})
}
关于reactjs - 为什么不能根据 Prop react 设置初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50403693/