Question

因此，我正在尝试创建要在整个项目中使用的服务，该服务将进行API调用以从服务器中检索一些数据。该函数看起来像这样

export function data(){
  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  fetch(proxyurl+process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
     return json;
    })
}

我正在尝试通过此操作访问我的React组件中返回的json

import {data} from '../../../../services/textService/textApi'



class Error404Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "Something"
    }
  }

   componentDidMount() {
   this.setState({
     data: this.data()
   })

  }

问题在于状态变量“数据”值设置为未定义。如何访问函数返回的数据？

Answer 1

希望返回某些内容的JavaScript函数必须显式返回它们。这是返回承诺的原始帖子代码的示例。我已经将函数调用扔到了一个Hook中，但是在基于类的组件中也可以完成同样的事情。

import React, {useEffect} from "react";
import ReactDOM from "react-dom";

function data(){
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => res.json())
    .then(json => json)
}

function App() {
  useEffect(() => {
    data().then(resp => console.log(resp))
  })

  return (
    <div />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这将在挂载App时将示例API端点的响应记录到控制台。

Returning Promise Demo (Code Sandbox)

Answer 2

您忘了退还findLocationYearAddPrice = () => { compiledData.map(compiledDataObj => { const objectsWithSameLocation = data.filter(dataObj => { return dataObj.location === compiledDataObj.location }); objectsWithSameLocation.map(obj => { compiledDataObj.year[obj.year] = obj.price }) }); };。

fetch

但这也会有一些问题，您需要使用export function data(){ const proxyurl = "https://cors-anywhere.herokuapp.com/"; // added return statement return fetch(proxyurl+process.env.REACT_APP_TEXT_API) .then(res => res.json()) .then(json => { return json; }) }或await/async。

.then

如果您要呼叫来自async componentDidMount() { // using await / async const newData = await data() this.setState({ data: newData }) }的{{1}}，请不要使用data。 import {data} from '...'来自您的组件，而不来自导入。

如何将函数返回的值获取到React中的另一个类中

2 个答案: