javascript - 子组件的 componentDidMount 事件中未定义父状态

Question

我在 componentDidMount 中设置父组件的状态，并通过 props 将其值传递给子组件，但即使输入已填充，当我在子组件的componentDidMount事件中运行console.log(this.props.value)，它是undefined。我需要在此事件中更新此值。

如何在这种情况下获取正确的prop值？

示例代码:

class Text extends React.Component {
  componentDidMount(){
    console.log(this.props.value);
  }
  
  render() {
    return (
    <div>
     <input type="text" value={this.props.value} />
     </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {}
    };
  }
  
  componentDidMount(){
    let data = {
      RequestId: "0000-000"
      }
      
      this.setState({ data });
  }
  
  render() {
    return (
      <Text value={this.state.data["RequestId"]} />
    );
  }
}

// Render it
ReactDOM.render(
  <Form />,
  document.getElementById("root")
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

在您的情况下发生的情况是子组件在父组件发生逻辑更改之前挂载。这是一种使其工作的方法。您还可以使用 componentDidUpdate 生命周期方法来触发更改。

记住 componentDidMount 只调用一次。所以目前 parent 得到它， child 已经挂载了。但是正如您所看到的，输入的值已被填充，这是因为 react 组件在 props 更改时重新渲染。但不要重新安装。

这里有了 if 部分，只有当数据 RequestId 被填充时，组件才会渲染，所以我们可以用你想要的值触发 componentDidMount。

class Text extends React.Component {
  componentDidMount(){
    console.log(this.props.value);
  }
  
  render() {
    return (
    <div>
     <input type="text" value={this.props.value} />
     </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {}
    };
  }
  
  componentDidMount(){
    let data = {
      RequestId: "0000-000"
      }
      
      this.setState({ data });
  }
  
  render() {
    if (!this.state.data["RequestId"]) { return null }
    return (
      <Text value={this.state.data["RequestId"]} />
    );
  }
}

// Render it
ReactDOM.render(
  <Form />,
  document.getElementById("root")
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>