Передача значения из обратного вызова в компоненте в другой компонент

Question

Я использую модуль giphy-api из nodejs и хочу передать эти данные для реакции.

У меня есть два компонента:

Api.js - это тот, который успешно соединяется с узлом.js и возвращает обратный вызов со всеми данными API.App.js является основным компонентом.Я импортирую Api.js, и когда я получаю console.log, это сообщение обратного вызова работает.Я пробовал реквизиты и состояния, но поскольку Api.js возвращает Callback, я не знаю, как его использовать.

Api.js

import openSocket from "socket.io-client";
const socket = openSocket("http://localhost:5000/");

function connect(cb) {
  // listen for any messages coming through
  // of type 'chat' and then trigger the
  // callback function with said message
  socket.on("chat", message => {
    // trigger the callback passed in when
    // our App component calls connect
    cb(message);
  });
}

export { connect };

App.js:

import React from 'react';
import { connect } from './api';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    // call our connect function and define
    // an anonymous callback function that`
    // simply console.log's the received
    // message
    var gifs = connect(message => {
      console.log(message);
    });
    this.state = {
            books: [
                {
                    name: 'Zero to one',
                    isbn: '9780804139298',
                    author: 'Peter Thiel',
                    cover: 'https://images.gr-assets.com/books/1414347376l/18050143.jpg',
                    status: false
                }
      ],
      gipphy: gifs
        };
  }

  render () {

      return (
        <div className=".App-logo">
            <li className=".App-logo">
              <img src={ this.state.books[0].cover} alt="gipphy.com animations"/>
              <img src={ this.state.gifs[0].images.original.url} alt="gipphy.com animations"/>
            </li>
      </div>
    )
      }
}

export default App;

TypeError: Невозможно прочитать свойство 'gipphy' из null

Теперь консоль.log не определен

Answer 1

Я думаю, что проблема в том, что вы сохранили gifs значение в gipphy переменной состояния.Поэтому вместо this.state.gifs вы должны использовать this.state.gipphy,

<img src={ this.state.gipphy[0].images.original.url} alt="gipphy.com animations"/>

Также убедитесь, что gifs содержит правильное значение.Просто сделайте console.log(gifs) в конструкторе.Если вы не получите gifs значение, то я думаю, что вам нужно вернуть его из обратного вызова,

var gifs = connect(message => {
   console.log(message);
   return message;   //return the message here
});

---

Обновление

Я думаю, что вашAPI требует времени для возврата данных.Вы можете использовать метод componentDidMount,

componentDidMount(){
   connect(message => {
      this.setState({
          gipphy: message
      })
   });
}

Вам необходимо условно отрендерить ваш img,

{this.state.giphy && this.state.giphy.length > 0 && <img src={ this.state.giphy[0].images.original.url} alt="giphy.com animations"/>}