将值传递给 props reactjs答案

【问题标题】：Passing value to props reactjs将值传递给 props reactjs
【发布时间】：2019-03-18 04:50:46
【问题描述】：

我正在尝试将值传递给我的子组件。我得到的值来自我在父组件中调用并在 componentDidMount 中调用的 API，但问题是子组件没有读取我在他自己的 componentDidMount 中传递的道具，它甚至变得空白在 reactdevtool 它传递正确的值。我以前解决过这个问题，但不记得我做了什么，你能帮忙吗？谢谢

孩子：

componentDidMount() {
  const {
    events
  } = this.props;
  console.log(events)
}

家长：

class App extends Component {
  componentDidMount() {
      let self = this;
      GetAllMainItems().then(function(GetAllMainItemsResults) {
          let MainObject = self.state.MainObject;

          self.setState({
            GetAllMainItemsResults
          });
        }
      }

      render() {

        constructor() {
          super();
          this.state = {
            MainObject: []
          };
        }
        return ( <
          div className = "App row" >

          <
          Calendar events = {
            this.state.MainObject
          }
          />

          <
          /div>
        );
      }

【问题讨论】：

这个问题可能是因为在GetAllMainItems 完成之前调用了render。解决办法：检查子组件中的值，如果没有设置，显示'loading'之类的。

标签： reactjs

【解决方案1】：

您需要检查一些事项。

constructor 应该在 render 方法之外。
您不必使用let self = this。你可以在那里做this.setState({...})。
查看您的GetAllMainItems 回调。我不知道你得到了什么那里。但是您绝对没有在您的状态下设置 mainObject 。相反，您将拥有 this.state.GetAllMainItemsResults。

建议

尝试理解对象解构。
使用箭头函数

希望对你有帮助。

父组件 ```

class App extends Component {
  state = {
    mainObject: ""
  };

  componentDidMount() {
    GetAllMainItems().then(response => {
      this.setState({
        mainObject: response
      });
    });
  }

  render() {
    const { mainObject } = this.state;

    return (
      <div className="App row">
        <Calendar events={mainObject} />
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

您遇到的问题是您的子组件在收到新的events 道具时正在重新渲染。

尝试添加componentDidUpdate 方法以查看这些道具更新：

componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log('events:', prevProps.events, this.props.events);
}

【讨论】：