将组件中的回调值传递给另一个组件

Question

我正在使用 nodejs 的 giphy-api 模块，我想传递这些数据来做出反应。

我有两个组件：

Api.js 是与 node.js 成功连接并返回包含所有 API 数据的回调。 App.js 是主要组件。我导入 Api.js 并且当我 console.log 这个回调消息它工作。 我尝试了 props 和 states 但因为 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: 无法读取 null 的属性“gipphy”

现在 console.log 是未定义的

Answer 1

我认为问题在于，您已将 gifs 值存储在 gipphy 状态变量中。所以你应该使用this.state.gipphy，而不是this.state.gifs，

<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"/>}