Question

我正在尝试将值传递给子组件。我得到的值来自于我在父组件中调用并在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>
        );
      }

Answer 1

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

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

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

Answer 2

您需要检查一些内容。

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>
    );
  }
}

将价值传递给道具reactjs

2 个答案: