Question

我将状态从父组件传递到子组件一切正常但我未定义来自父组件的道具我认为因为我正在制作async它在设置状态之前需要两秒钟。当我在Child组件的this.props.check中设置TimeOut componentDidMount两秒时，它可以正常工作

这里的问题我不能使用setTimeOut，所以我决定使用componentWillReceiveProps它已经工作但是当子组件中的任何事件呈现{{1}时将重新渲染，我只需要渲染一次。

我将代码更改为简单

父组件

componentWillReceiveProps

子组件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      check: ''
    }
  }
  componentWillMount() {
    this.call();
  }
  call = () => {
    //I'm making async here might take two sec
      this.setState({ check: 'received' })

  }

  render() {
    return (
      <div>
        <span>Parent Component</span>
        <Child check={this.state.check}  />
      </div>
    )
  }
}

Answer 1

如果应用的state.check可能是null（因为它是异步设置的），您需要决定在此期间要渲染的内容。

在应用程序的渲染方法中使用此设置Child之前，您可能根本不想渲染state.check：

{ this.state.check ? (<Child check={this.state.check} />) : (<div>Loading...</div>) }

使用componentWillReceiveProps将状态从Parent传递给Child多次

1 个答案: