4

我有一个 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
  }
}

每次更改道具 VALUE 的值时，我都会得到：

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

和

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

我认为这可能与 state/setState 异步且较旧getinitialState有关，但我不明白为什么。

4

2 回答 2

10

从构造函数中的 props 或作为类属性初始化 state，不会在 prop 更改时更新 state。但是，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 更改时更新状态，您需要使用组件的生命周期方法。

使用 React ^16.3，您可以使用静态getDerivedStateFromProps()方法从道具更新状态（并初始化它）：

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,
  })
}
于 2018-05-18T04:44:21.707 回答
2

如果没有构造函数中的 super(props)，它将无法工作。

    class AttachStateToProps extends React.Component { 
constructor(props) { 
super(props); 
this.state = { stateValue: this.props.VALUE, 
} 
} 
render() { 
console.log('Value of Prop - ', this.props.VALUE) console.log('Value of State - ', this.state.stateValue) return null 
}
 }
于 2018-07-07T08:12:34.173 回答