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

Question

我对反应还很陌生，我被困在一些我觉得微不足道的事情上。所以我想做的是我想将数据从父组件传递给子组件。我的代码看起来像这样。

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 组件中的资源数据？

Answer 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}
}

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

Answer 3

您可能需要一个有状态组件来实现此目的。将响应保存到状态，然后从状态中获取他的 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>
    )
  }
}

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

Passing data on an API call from parent to child container in react

javascript

node.js

reactjs

react-native

react-slick