如何正确地将axios响应分配给react函数组件状态答案

【问题标题】：How to correctly assign axios response to react function component state如何正确地将axios响应分配给react函数组件状态
【发布时间】：2020-11-05 10:42:27
【问题描述】：

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

我只想通过 .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;
    });
}

请求给数组这样的对象

{language: "af"}

【问题讨论】：

请阅读useEffect。
@jonrsharpe 同样的情况
什么是？给minimal reproducible example。
看看@Dyarlen 的回答，我的代码现在看起来像这样，但现在有另一个问题

标签： reactjs axios react-functional-component

【解决方案1】：

在 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>
  );
};

【讨论】：

我把它放入 useEffect 并且仍然以相同的方式工作：/
对不起@programmer 我忘了传递一个空数组作为第二个参数。试试看，告诉我它是否有效
有效，但现在元素不渲染。我认为当数组仍然为空时，因为 map() 创建元素存在问题。但我不确定这个
我将日志放在 map() 中，一切正常 - 对象显示在控制台中，但仍未渲染到 DOM 中
好吧，没人看到我没有把返回状态放到map() LOL。对不起我的错

【解决方案2】：

它为您提供了无限循环，因为您在每次渲染时都在更改状态。把这段代码放在useEffect钩子里

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

【讨论】：

什么都没发生：/
看看@Dyarlen 的回答——我的代码看起来像这样
这应该很好用，因为 deps 数组是空的，它应该只运行一次。你还在获得无限的 console.logs 吗？
在@Dyarlen 答案中查看 cmets - 我解释了现在的问题

【解决方案3】：

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

在 React 中，当您使用列表时，每个列表项都需要一个唯一的键。

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

【讨论】：

使用 useEffect like u - 循环停止。我添加了一个键，现在元素没有显示
我认为 map() 是在将数据设置为状态之前创建元素，但我该如何弄清楚呢？
@programmer language的内容是什么？每个language 属性是否都有唯一值？