Передача данных о вызове 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 компоненту ReactSlick, который находится внутри компонента Dialog.Как я смогу использовать данные res в компоненте 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

Для этого может потребоваться компонент с состоянием. Сохраните ответ в состояние, а затем получите значение 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>
    )
  }
}

Answer 3

Попробуйте сначала использовать async / await, а затем передать его в дочерний компонент

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