请求数据，将其传递给另一个组件并在反应中返回

Question

我想在页面上显示搜索结果。我的想法是提交一个向服务器发送请求的提交。收到数据后，我遍历它并调用一个函数在另一个组件中处理它，该组件应该将处理后的数据呈现回父组件。不幸的是，搜索组件中没有呈现数据，也没有给出任何错误进行调试。

目前的主要问题是 SearchResults 没有返回任何数据；我也不确定该组件是否接收到数据。

import React, { Component } from "react";
import axios from "axios";
import SearchResults from "./SearchResults";

export default class SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
      query: "",
      searchresults: []
    };
  }

  submitSearchResults(searchresults) {
    return this.state.searchresults.map(function(object, i) {
      return <SearchResults obj={object} key={i} />;
    });
  }

  onSubmit(e) {
    e.preventDefault();

    axios
      .get("http://localhost:4200/serverport/spotify/" + this.state.song)
      .then(res => {
        const searchresults = res.data;

        for (var key in searchresults) {
          if (searchresults.hasOwnProperty(key)) {
            for (var i = 0; i < searchresults[key].items.length; i++) {
              this.submitSearchResults(searchresults[key].items[i]);
            }
          }
        }
      });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            value={this.state.query}
            onChange={this.onChangeSong}
          />
          <input value="search" type="submit" />
        </form>
        <div>{this.submitSearchResults()}</div>
      </div>
    );
  }
}

这是从服务器请求数据的代码。我删除了一些不相关的代码以使其更具可读性。

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

class SearchResults extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>works</div>;
  }
}

export default SearchResults;

这是应该处理数据的文件。我只渲染“作品”以进行调试。

Answer 1

当请求完成时，您可以将searchresults设置为状态，而不是调用渲染搜索结果JSX的函数，组件将自动重新渲染。

示例

const axios = {
  get: () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ data: [{ text: "foo" }, { text: "bar" }] });
      }, 1000);
    });
  }
};

class SearchComponent extends React.Component {
  state = {
    song: "",
    searchresults: []
  };

  submitSearchResults(searchresults) {
    return this.state.searchresults.map(function(object, i) {
      return <SearchResults obj={object} key={i} />;
    });
  }

  onSubmit = e => {
    e.preventDefault();

    axios
      .get("http://localhost:4200/serverport/spotify/" + this.state.song)
      .then(res => {
        const searchresults = res.data;

        this.setState({ searchresults });
      });
  };

  onChangeSong = e => {
    this.setState({ song: e.target.value });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            value={this.state.song}
            onChange={this.onChangeSong}
          />
          <input value="search" type="submit" />
        </form>
        <div>{this.submitSearchResults()}</div>
      </div>
    );
  }
}

class SearchResults extends React.Component {
  render() {
    return <div>{this.props.obj.text}</div>;
  }
}

ReactDOM.render(<SearchComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>