Question

我正在尝试从其父级的props设置嵌套组件的状态，如果我直接使用父级checked={Boolean(this.props.contData.statesValue.active)}的传入prop设置了Switch的选中属性，则switch ui成功从开启到关闭，

import React, { Component } from "react"
import Switch from '@material-ui/core/Switch';

class Test extends Component {
            
    render() {
      return (
        <div>
          <Switch checked={Boolean(this.props.contData.statesValue.active)} />
        </div>
      );
    }
}
 
export default (Test);

但是，如果我尝试设置通过状态检查，则ui不会更新，并且记录this.state.checked的值不会更改，

我冒昧猜测我将在生命周期的错误部分中更新代码，但是任何帮助将不胜感激

import React, { Component } from "react"
import Switch from '@material-ui/core/Switch';

class Test extends Component {
        
    state = {
      checked:this.props.contData.statesValue.active
    }
    render() {
        return (
            <div>
              <Switch checked={Boolean(this.state.checked)} />
            </div>
        );
     }
}
 
export default (Test);

Answer 1

状态最初设置为prop值，并且在收到新的prop值时不会更新。

这是getDerivedStateFromProps生命周期方法的用途：

state = {};

static getDerivedStateFromProps(props, state) {
  return {
   checked: !!props.contData.statesValue.active
  };
}

render() {
    return (
        <div>
          <Switch checked={this.state.checked} />
        </div>
    );
 }

如果状态与道具没有区别，则不需要该状态；组件可以是无状态的，可以直接使用props。

Answer 2

{Boolean(this.state.checked)}将变量转换为不再是变量的布尔值。它获取this.state.checked的值，将其转换为布尔值，并且不再更新，因为它不是变量。因此，您需要将其修改为<Switch checked={this.state.checked} />。

React Props不更新状态

2 个答案: