javascript - React 重用在整个组件中获取 JSON 数据

Question

嗨，我是 React 的新手，在整个项目中学习可重用函数。

我想获取我的 JSON 数据，但不必每次都在我的组件中调用它。

应用程序.js

import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";

import logo from '../assets/logo.png';
import './app.css';

import About from "../about/about";
import Services from "../services/services";
import Testimonials from "../testimonials/testimonials";
import Contact from "../contact/contact";

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
       items : []
    };
}
componentDidMount(){
  this.getItems();
}
getItems(){
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({'items': results}));
}
render() {
 return (
  <HashRouter>
    <div className="container">
      <div className="header">
        <div className="App-logo"><NavLink exact to="/"><img src={logo} alt="logo" /></NavLink></div>
        <nav className="Nav-Desktop">
        {this.state.items.map((item, index) => (
          <div key={index}>
          {
            item.links.map((link, i) => (
            <NavLink key={i} exact to={link.url}>{link.text}</NavLink>
          ))}
          </div>
        ))}
        {
          this.state.items.map((item, index) => {
            return <div key={index}><a href={item.mainContact.phoneHref + item.mainContact.phone}><i className="fa fa-phone"></i><strong> {item.mainContact.phone}</strong></a></div>
          })
        }
        </nav>
      </div>
      <main className="content">
         <Route exact path="/" component={About}/>
         <Route path="/services" component={Services}/>
         <Route path="/testimonials" component={Testimonials}/>
         <Route path="/contact" component={Contact}/>
      </main>
      {this.state.items.map((item, index) => {
        return <footer key={index}>&copy; Copyright {item.title} {(new Date().getFullYear())}</footer>
      })
      }
    </div>
    </HashRouter>
    );
  }
}
export default App;

我已成功映射我的数据并显示它，但我还有其他包含此代码段的文件

constructor(props) {
    super(props);
    this.state = {
       items : []
    };
}
componentDidMount(){
  this.getItems();
}
getItems(){
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({'items': results}));
}

我尝试在 helper.js 文件中像这样导出 getItems() 并导入文件，import { getItems } from '../helpers/helpers';但是代码无法正常工作并卡在Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

export function getItems() {
    fetch('./data/data_arr.js')
    .then(results => results.json())
    .then(results => this.setState({'items': results}));
}

如果有人能给我指出错误/正确的解决方法，那将很有帮助。干杯

标签： javascriptjsonreactjsfetch

Answer 1

当你想重用数据而不是一次又一次地调用 fetch 时，你需要知道两件事

1. 在最顶层的组件（即父组件）中获取调用并将数据传递给所有子组件，将子组件传递给子组件，但是请记住，这对您来说会很忙。当您构建最大到最多 50 个组件的小型应用程序时，这种方法非常有用。但是当您的应用程序变大时，这不是跨组件重用数据的推荐方式。

2. 使用 Redux 状态管理库实现跨组件的数据可重用性。这就像您的应用程序的集中存储。如今，这主要用于每个 React 应用程序。使用 Redux，您可以在父组件中进行操作调用，该操作实际上会获取数据并将其传递给 reducer。所以现在 reducer 会在 Redux 存储中设置数据。现在，通过使用 state.get 从 Redux 存储中获取数据，每个组件都可以访问数据。所以你可以像 this.props.getItems(); 这样调用 redux 动作。无论您在哪里需要组件中的数据，组件 mapStateToProps 都会将该数据作为道具提供给您的组件

如何从 Redux 存储中获取数据？

在组件中定义一个函数 mapStateToProps 并使用 state.get 从 Redux 存储中获取数据并在函数中返回。将 mapStateToProps 传递给 connect 方法。你将把你的组件连接到名为 connect 的 Redux HOC 组件。这个 connect 方法接受动作和 Redux 状态，并将它们作为 props 提供给组件。

关于你的问题

   Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

您收到此问题的原因是因为这在导出的 getItems 函数中不可用。

解决此问题所需要做的是将其作为参数传递给 getItems 函数

注意：这是当前上下文

 import { getItems } from '../helpers/helpers';

 componentDidMount(){
     getItems(this);
 }

helpers.js：

 the below function is treated as a normal JavaScript function. This function no wr belongs the component to bind it in component constructor. But in order to play with the state of the component you need to pass the component context this. But this is old way, now a days we all use Redux to avoid these old concepts

 export function getItems(this) {
      fetch('./data/data_arr.js')
.then(results => results.json())
.then(results => this.setState({'items': results}));
      }

这样你就可以重用这个函数并执行 setState。

但是请记住，当您的应用程序将来变得很大时，这些解决方案会变得复杂。所以我建议你从现在开始使用 Redux 状态管理库，以避免将来繁忙的迁移:)

如果有任何拼写错误，请原谅，因为我是用手机回答的。