React - 将从 API 获取的数据作为道具传递给组件

Question

我试图理解和学习如何将数据作为道具传递给其他组件使用。 我正在尝试构建一个顶级层次结构，其中 API 请求在顶级类中进行，然后将结果传递给子组件以用作道具，然后在状态中使用。

问题是当我传递结果时，我在我的子组件中得到了“Object Promise” 。 如何访问作为道具发送给子组件的数据？

正如您在App.js的 render() 方法中看到的那样，我创建了类 API 的一个组件，并将fetchData()方法的结果作为参数传递给该组件。

在我的 API.js 类中，我使用 console.log来检查结果，但我从日志中得到的结果是：

第 5 行： {数据对象：承诺}

第 10 行：未定义

应用程序.js：

import API from './API';

class App extends Component {

  componentDidMount(){
    this.fetchData();
  }


  fetchData(){
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      return fetch(url)
          .then(response => response.json())
          .then(parsedJSON => console.log(parsedJSON.results))
          .catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <API dataObject={this.fetchData()}/>
      </div>
    );
  }
}

export default App;

API.js

import React from 'react';

class API extends React.Component{
    constructor(props){
        console.log(props);
        super(props);
        this.state = {
            dataObj:props.dataObject
        };
        console.log(this.state.dataObject)
    }


    render() {
        return(
            <p>""</p>
        )
    }
}

export default API;

Answer 1

尝试将 App.js 更改为：

import API from './API';

class App extends Component {

  componentDidMount(){
    this.fetchData();
  }


  fetchData(){
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      return fetch(url)
          .then(response => response.json())
          .then(parsedJSON => this.setState({results: parsedJSON.results}))
          .catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <API dataObject={this.state.results}/>
      </div>
    );
  }
}

export default App;

这可确保您在componentDidMount获取数据，并且它现在使用state来存储数据，然后这些数据将被传递到您的API组件中。

Answer 2

您应该在componentDidMount而不是在render获取数据。 每次在 react.js 重新渲染 DOM 时，获取渲染中的数据会导致重复 API 请求。

在向 API 端点发出GET请求后，首先将数据解析为一个 javascript 对象，然后使用组件内的this.setState将结果设置为state 。

从那里，您可以将state保存的数据作为render函数中的道具传递给子组件。

例如：

const App = (props) => 
    <ChildComponent />

class ChildComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            results: []
        }
    }
    componentDidMount(){
        fetch('/api/endpoint')
            .then(res => res.json())
            .then(results => this.setState({results})
    }

    render(){
        return <GrandchildComponent {...this.state} />
    }

}

const GrandchildComponent = (props) => 
    <div>{props.results}</div>

Answer 3

如果有人正在使用 Hooks 寻找答案，那么这可能会有所帮助。

应用程序.js

import API from './API';

function App(props) {

  const [result, setResult] = React.useState({});

  // similar to componentDidMount
  React.useEffect(() => {
    this.fetchData();
  }, []);


  fetchData() {
      const url = "https://randomuser.me/api/?results=50&nat=us,dk,fr,gb";
      fetch(url)
          .then(response => setResult(response.json()))
          .catch(error => console.log(error));
  }
  return (
      <div className="App">
        <API dataObject={result}/>
      </div>
    );
}

export default App;

API.js

import React from "react";

function API(props) {
  
  const [result, setResult] = React.useState(props.dataObject);

  React.useEffect(() => {
    setResult(result);
  }, [result]);

  return <p>{result}</p>;
}

export default API;

希望能帮助到你！ 如果有什么不正确，请告诉我。