Question

我有标题上的问题。我的代码给了我无限循环-控制台日志一直在循环。

我只想通过.map（）将axios响应分配给组件状态nad渲染元素

组件：

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挂钩中添加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 2

它给您无限循环，因为您正在更改每个渲染器上的状态。将此代码放在useEffect钩子中

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

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

如何正确分配axios响应以反应功能组件状态

3 个答案: