Question

我正在componentDidMount中设置父组件的状态，并通过props将其值传递给子组件，但是即使输入已填充，当我运行console.log(this.props.value)时在子组件的componentDidMount事件中，它是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仅获得一次呼叫。因此，当父母得到它的时候，孩子已经被装上了。但是正如您所看到的，输入值已填充，这是因为在props上react组件重新渲染后发生了变化。但不能删除。

使用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>

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

1 个答案: