如何正确分配 axios 响应以响应函数组件状态

Question

我遇到了标题中的问题。我的代码给了我一个无限循环 - 控制台日志一直在循环。

我只想通过 .map()

将 axios 响应分配给组件状态和渲染元素

组件：

const Translator = () => {
    const [languages, setLanguages] = useState([]);
    getLanguages().then(data => {
       setLanguages(data.languages)
    });
    
    console.log(languages);
  
  return (
    <header className="translator__header">
        {languages.map( lang => {
            <h1>{lang.language}</h1>
        })}
    </header>
  );
};

资源：

export default () => {
    return Axios.get(`${config.baseURL}/languages`, {headers: config.headers}).then(res => {
        return res.data.data;
    });
}

请求像这样object给出数组

{language: "af"}

Answer 1

它给你无限循环，因为你在每次渲染时改变状态。将此代码放在 useEffect 钩子

中

getLanguages().then(data => {
   setLanguages(data.languages)
});

Answer 2

在 useEffect 挂钩中发出 axios 请求，以便运行一旦安装了组件。

import { useEffect } from 'react';

const Translator = () => {
    const [languages, setLanguages] = useState([]);
    useEffect(() => {
      getLanguages().then(data => {
         setLanguages(data.languages)
      });

      console.log(languages);
    }, []);
    
  
  return (
    <header className="translator__header">
        {
          languages.length > 0 && (
            languages.map( lang => <h1>{lang.language}</h1>)
          )
        }
    </header>
  );
};

Answer 3

尝试使用useEffect 钩子。将 [] 作为第二个参数传递更接近熟悉的 componentDidMount 和 componentWillUnmount 心智模型。

In React, when you use lists, each list item needs a unique key.

const Translator = () => {
    const [languages, setLanguages] = useState([]);

    useEffect(() => {
        getLanguages().then(data => {
           setLanguages(data.languages)
        });
    }, []);

    console.log(languages);
  
    return (
        <header className="translator__header">
            {languages.map(lang => {
                <h1 key={lang.language}>
                    {lang.language}
                </h1>
            })}
        </header>
    );
};

如何正确分配 axios 响应以响应函数组件状态

How to correctly assign axios response to react function component state

reactjs

axios

react-functional-component