为什么不能根据道具做出反应来设置初始状态 [英] Why cant react set initial state based on props

问题描述

我有一个es6 react组件，我希望状态的初始值取决于传递的prop的值，但其值始终为false:

I have a es6 react component that I want the initial value of the state to depend on that of the passed down prop, but its value is always false:

AttachStateToProps组件

AttachStateToProps component

<AttachStateToProps VALUE=false />

AttachStateToProps组件:

AttachStateToProps component:

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的值时，我都会得到:

Every time the value of the prop VALUE is changed, I get:

`Value of Prop - false` // this changes whenever I change prop value in 
   <AttachStateToProps />

和

`Value of State - false` // this does not change accordingly.

我认为这可能与state/setState异步和较旧的

I figure it could be something to do with state/setState being async and older getinitialState but I don't get why it.

推荐答案

在prop更改时，从构造函数中的props初始化状态或作为类属性不会更新状态.但是，react确实会检测到道具更改，并重新释放组件.

Initializing the state from the props in the constructor, or as a class property, will not update the state when the prop changes. However, react does detect the prop change, and rerenders the component.

示例:

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>

要在道具更改时更新状态，您需要使用组件的

To update the state when the prop changes, you need to use a component's lifecycle method.

使用React ^ 16.3，您可以使用静态 getDerivedStateFromProps() 从道具更新状态的方法(也将其初始化):

With React ^16.3 you can use the static getDerivedStateFromProps() method to update the state from the props (and initialize it as well):

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()

With React versions prior to 16.3, you can use componentWillReceiveProps().

注意:componentWillReceiveProps已过时，但在第17版之前仍可以使用.

Note: componentWillReceiveProps is deprecated, but will work 'till version 17.

componentWillReceiveProps(nextProps, prevState) {
  this.setState({
    stateValue: nextProps.VALUE,
  })
}

这篇关于为什么不能根据道具做出反应来设置初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！