将道具传递给反应中的不同组件

Question

只是遇到了麻烦，很抱歉这个菜鸟问题，但我似乎无法在 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

稍作更正：

状态更新是异步的。所以如果要打印就传一个回调函数
在 StockSearch 组件中，您需要从状态（而非数据）

searchResult

在 DisplayData 组件中使用 this.props。还要在 render 方法中调用你的函数（dataResults），以便它被调用和渲染

您的 code is here

的工作副本

股票搜索组件


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>
    );
  }
}

显示数据组件

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>;
  }
}

将道具传递给反应中的不同组件

Pass props to different components in react

fetch

reactjs

react-props