Блог

Главная - Вопросы по программированию - Передача данных при вызове API из родительского контейнера в дочерний в react

Передача данных при вызове API из родительского контейнера в дочерний в react

#javascript #node.js #reactjs #react-native #react-slick

#javascript #node.js #reactjs #react-native #реагирующий слик

Вопрос:

Я довольно новичок в react, и я застрял на чем-то тривиальном, что я чувствую. Итак, что я хочу сделать, так это передать данные из родительского компонента в дочерний. Мой код выглядит следующим образом.

 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?

Ответ №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, чтобы сначала получить разрешение, а затем передать его в дочерний компонент

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

Комментарии:

1. Неперехваченное инвариантное нарушение, поскольку react не знает, как выполнять обещания. Как я буду обходить это?

Ответ №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>
    )
  }
}