UseEffect 无限循环，带 axios

Question

您好，我在带有 axios 的 reactt 中使用 Useeffect 来显示数据库中的对象， 我在使用效果中遇到了一个无限循环，我很多时候无法在浏览器上显示对象， 但是spring boot server仍然是无限调用，当我从useeffect打印数据时，控制台上也会显示一个无限的对象。

这是我的代码，希望你能提出解决方案；em

 const [filterKeywords, setfilterKeywords] = useState([]);

    const [companies, setCompanies] = useState([]);
    useEffect(() => {
        axios.get(`/api/users/allCompanies`)
            .then(res => {
                setCompanies(res.data);
            })
    });

然后我将它们传递给公司组件

 <Companies
                keywords={filterKeywords}
                data={companies}
                setKeywords={addFilterKeywords}
            />

然后将它们传递给公司组件

return (
        <div className="jobs">
            {(filteredData.map(d => {
                return <Company key={d.id} data={d} setkeywords={setKeywords} />

            }))}
        </div>
    )

Answer 1

将您的 useEffect 代码更改为此。

    useEffect(() => {
        axios.get(`/api/users/allCompanies`)
            .then(res => {
                setCompanies(res.data);
            })
    },[]);

Answer 2

添加 Empty 依赖项......最后像这样

useEffect(() => {
    axios.get(`/api/users/allCompanies`)
        .then(res => {
            setCompanies(res.data);
        })
},[]);

Answer 3

您的useEffect 中没有任何回调，这就是它执行无穷大的原因。

你可以像[]这样添加数组，或者你可以在你的数组中添加回调触发器，那么你就不会再遇到这个问题了

   useEffect(() => {
            axios.get(`/api/users/allCompanies`)
                .then(res => {
                    setCompanies(res.data);
                })
        },[]);

Answer 4

这是你需要做的。

const [filterKeywords, setfilterKeywords] = useState([]);
const [companies, setCompanies] = useState([]);
useEffect(async () => {
        await axios.get(`/api/users/allCompanies`)
            .then(res => {
                setCompanies(res.data);
        })
},[]);

当您调用api 时，您应该使用async 等待，但这并不是您缺少inifinity 循环的原因[]

选项 2：

const [filterKeywords, setfilterKeywords] = useState([]);

const [companies, setCompanies] = useState([]);
useEffect(() => {
       (async ()=>{
             const {data} = await axios.get(`/api/users/allCompanies`)
             setCompanies(data);
       })();
},[]);