reactjs - 如何正确分配 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;
    });
}

请求给数组这样的对象

{language: "af"}

Answer 1

在 useEffect Hook 中发出 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>
  );
};