запросите данные, передайте их другому компоненту и верните в react

Я хочу отобразить результаты поиска на странице. Моя идея состояла в том, чтобы сделать submit, который отправляет запрос на сервер. После получения данных я перебираю их и вызываю функцию для обработки в другом компоненте, который должен передать обработанные данные обратно в родительский компонент. К сожалению, никакие данные, отображаемые в компоненте поиска, и никакие ошибки не были переданы для отладки.

Основная проблема прямо сейчас заключается в том, что никакие данные не возвращаются из 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;

Это файл, в котором предполагается обрабатывать данные. Я только рендерю "работы" для отладки.

1 2
reactjs

1 ответ:

Вместо вызова функции, которая выводит результат поиска JSX, когда запрос завершен, вы можете установить searchresults в состояние, и компонент будет автоматически повторно выводиться.

Пример 

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>
1