在反应中将API调用上的数据从父容器传递到子容器答案

【问题标题】：Passing data on an API call from parent to child container in react在反应中将API调用上的数据从父容器传递到子容器
【发布时间】：2019-08-23 06:28:01
【问题描述】：

我对反应还很陌生，而且我被困在我觉得微不足道的事情上。所以我想做的是我想将数据从父组件传递给子组件。我的代码如下所示。

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => console.log("Result is", res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick />
            </Dialog>
    );
}

所以基本上我现在只是在控制台记录结果，但我想以某种方式将 res 传递给包装在 Dialog 组件中的 ReactSlick 组件。我将如何使用 ReactSlick 组件中的 res 数据？

【问题讨论】：

标签： javascript node.js reactjs react-native react-slick

【解决方案1】：

尝试将存储在父状态中的数据作为属性传递给子元素。从 API 接收数据后更改状态。更改父级的数据属性将传播到子级。

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => this.setState({data: res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick data={this.state.data} />
            </Dialog>
    );
}

在父组件的构造函数中：

constructor(){
  this.state = {data: null}
}

【讨论】：

【解决方案2】：

尝试使用async/await先获取res，然后传入子组件

async getData(key) {
      let { getData } = this.props;
      let res = null;
      if (getData.code === "ON") {
          try{
            res = await Codeapi(getData._id[0]);
          } catch(e) {
            console.log(e);
          }
      }
      return (
          <Dialog
              key={key}
              side="left"
              onImageClick={this.handleClick}>
              <ReactSlick res/>
              </Dialog>
      );
    }

【讨论】：

未捕获的不变量违规，因为反应不知道如何呈现承诺。我将如何解决这个问题？

【解决方案3】：

您可能需要一个有状态的组件来实现这一点。保存对 state 的响应，然后从 state 中获取 res 值，将其传递给 Slick 组件。

export class TestComponent extends Component {
  constructor() {
    super();
    this.state = {
      res: null
    };
    this.getData = this.getData.bind(this);
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    let { getData } = this.props;
    if (getData.code === "ON") {
      Codeapi(getData._id[0])
        .then(res => this.setState({ res })) // saving res to state
        .catch(error => console.log(error)); // use catch for errors from promises
    }
  }

  render() {
    const { res } = this.state;
    return (
      <Dialog
        key={key}
        side="left"
        onImageClick={this.handleClick}>
        <ReactSlick res={res} />
      </Dialog>
    )
  }
}

【讨论】：