Передача реквизита для различных компонентов в реакции

Question

Просто возникли проблемы, извините за вопрос noob, но я не могу записать результаты опроса в файле DisplayData. js. Я пытаюсь передать состояние SearchStockResult в файл DisplatData. js ... Я попытался записать в журнал свойство данных безуспешно. Не уверен, что происходит. Извините за соглашения об именах, так как я только что изменил его с поиска на фондовом на крипто-поиск.

import React, { Component } from 'react'
import DisplayData from './DisplayData';

export default class stockSearch extends Component {
   state = {
       searchResult: '',
   }

   componentDidMount = () => {

    fetch(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD`)
    .then((response) => response.json())
    .then(data => {
        this.setState({ searchResult: data });
        console.log(this.state.searchResult);

    });
}


    render() {
        const {data} = this.state;

        return (
            <form>
            <label>
              Name:
              <input type="text" name="query" />
            </label>
            <button>Search Crypto</button>

            <DisplayData results={data} />

          </form>




        )
    }
}



import React, { Component } from 'react'

export default class DisplayData extends Component {

    dataResults = (props) => {

        console.log('from data results', props.results);

    }



    render() {
        return (
            <div>

            </div>
        )
    }
}

Answer 1

Внесите несколько исправлений:

• Обновление состояния asyn c. Поэтому передайте функцию обратного вызова, если вы хотите напечатать ее
• в компоненте StockSearch, вам необходимо деструктурировать searchResult из состояния (не данных)
• В компоненте DisplayData используйте this.props. Также вызовите вашу функцию (dataResults) в методе рендеринга, чтобы она вызывалась и отображалась

Рабочая копия вашего кода находится здесь

StockSearch Component

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

export default class StockSearch extends Component {
  state = {
    searchResult: ""
  };

  componentDidMount = () => {
    fetch(
      `https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD`
    )
      .then(response => response.json())
      .then(data => {
        this.setState({ searchResult: data }, () => {
          console.log("api result", this.state.searchResult);
        });
      });
  };

  render() {
    const { searchResult } = this.state;
    return (
      <form>
        <label>
          Name:
          <input type="text" name="query" />
        </label>
        <button>Search Crypto</button>

        <DisplayData results={searchResult} />
      </form>
    );
  }
}

Компонент DisplayData

import React, { Component } from "react";

export default class DisplayData extends Component {
  dataResults = () => {
    console.log("from data results", this.props.results);
  };

  render() {
    this.dataResults() // just to print
    return <div>{return <div>{JSON.stringify(this.props.results)}</div>;}</div>;
  }
}