Question

需要帮助将状态作为道具传递给另一个状态组件。我是React的新手，我不确定自己做错了什么。当我在Timer组件内进行console.log时，它显示未定义，但是当我在Main组件中进行console.log时，它完美地显示了对象。

class Main extends React.Component {
  constructor() {
      super()
      this.state = {
          isLoaded: false,
          itemsP:{}
      }
  }

  componentDidMount() {
    fetch("https://api.spacexdata.com/v3/launches/next")
        .then(response => response.json())
        .then(
            (resData) => 
                this.setState({
                     isLoaded: true,
                     itemsP: resData
                 })
        )
}



render() {
   console.log(this.state.itemsP) //this will console.log the object from the api

    return (           
        <main>
           <Timer nextLaunch={this.state.itemsP} />
        </main>

    )
}
}

//Timer component

class Timer extends React.Component{
constructor(props) {
    super(props)
    this.state = {
        nextDate: props.nextLaunch.launch_date_utc             
    }
}

render() {
   console.log(this.state.nextDate)  //will console log UNDEFINED why is this?

    return (    
      <div>
        //display something....
      </div>
    )
}
}

here是我用于参考的API的链接。

Answer 1

从您的父组件中，您将值传递为nextLaunch 不要忘记在您的父组件构造函数中调用道具

 constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      itemsP: 'myValue'
    }
 }

<Timer nextLaunch={this.state.itemsP} />

因此，在您的计时器组件中，要打印您的值，您必须以这种方式{@ {1}}

this.props.nextLaunch

希望有帮助

Answer 2

@tlrmacl可能在那里回答了。它缺少this关键字。从理论上讲，您可能仍将初始值分配给状态。

这是由于反应生命周期如何工作

在componentDidMount()上，您正在将jsx挂载到DOM后调用setState。为this.state.itemsP赋予初始值{}，然后在装载之后，它将从comopnentDidMount()接收新值

在Timer组件内部，您正在将this.props.nextLaunch的第一个值分配给新状态。它没有机会更新值。而不是这样做：

this.state = {
        nextDate: props.nextLaunch.launch_date_utc             
}

直接使用props.nextLaunch.launch_date_utc：

console.log(props.nextLaunch.launch_date_utc)

有关更多信息，请查看Dan Abramov here

的这篇推文。

Answer 3

//Timer component

class Timer extends React.Component{
constructor(props) {
    super(props)
    this.state = {
        nextDate: this.props.nextLaunch.launch_date_utc             
    }
}

您需要this.props而不是构造函数中的props

反应：如何将道具传递给状态组件？

3 个答案: