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

是的，创建一个函数并返回回复数据must use async await

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

我希望这会有所帮助！

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

1 个答案: