javascript - ReactJS:我可以在单独的组件中分离一个改变状态的函数吗？

Question

我的 React 应用程序中有一个函数调用 componentWillMount 生命周期方法。 它从 JSON 文件中获取数据并将其推送到组件的状态(它是文本数据，稍后我将该文本插入到页面中)。

我将在许多其他组件上使用相同的功能，我可以将此功能分离到一个单独的组件中以使其可重用吗？

这是我的代码:

import React from 'react';
import axios from 'axios';
import logo from '../img/company_logo.png';
import '../css/header.scss';
import getTextData from './getTextData';


const NumberList = (props) => {
  console.log(props.value);

  const itemList = props.value;

  const listItems = itemList.map(number => (
    <li key={number.toString()}>
      {number}
    </li>
  ));
  return (
    <ul>{listItems}</ul>
  );
};

export default class Header extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentWillMount() {
    axios.get('./data.json')
      .then((res) => {
        this.setState({
          siteData: res.data,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    // console.log(this.state);
    const { siteData } = this.state;

    if (siteData) {
      console.log(siteData.data.mainPage.navBar);
    } else {
      return null;
    }

    return (
      <div className="headerWrapper">
        <a href=".../public/index.html"><img src={logo} alt="company_logo" id="companyLogo" /></a>
        <NumberList value={siteData.data.mainPage.navBar} />
      </div>
    );
  }
}

Answer 1

是的，创建一个函数并返回响应数据，必须使用异步等待

//fetchService.js
    import axios from 'axios';
    export default async function fetchService(){
       let responseData = [];    
       await axios.get('./data.json')
          .then((res) => {
             responseData = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
       return responseData;
    }
// App.js
import fetchService from './fetchService';
 async componentDidMount() {
    let tempData = await fetchService();
     this.setState({
          siteData: tempData,
     });
  }

希望对您有所帮助!