函数组件一遍又一遍地重新渲染

Question

我的反应函数组件一遍又一遍地重新渲染自己，直到浏览器崩溃。

我能找到的唯一解决方案是在useEffect((结束时输入带有我的常量的[]。

function getNestedObject(nestedObj, pathArr) {
return pathArr.reduce(
(obj, key) => (obj && obj[key] !== "undefined" ? obj[key] : undefined),
nestedObj
);
}
function Genres() {
const [genreList, setgenreList] = useState(0);
useEffect(() => {
let results = "";
axios({
url: "https://api.themoviedb.org/3/genre/movie/list?",
method: "GET",
responseType: "json",
params: {
api_key: "00000000000",
language: "en-US"
}
}).then(result => (results = result.data.genres));
let a = [];
for (let i = 0; i < 10; i++) {
let name = getNestedObject(results, [i, "name"]);
a.push(name);
}
setgenreList(a);
console.log(genreList);
}, [genreList]);
return <div>test</div>;
}

我也尝试过没有useEffect，它给出了相同的循环结果。

我在渲染中<Genres />下来。

Answer 1

它的发生是因为你在打电话

setgenreList(a);

在 useffect 时，genreList 更改其状态，UseEffect 再次运行

当你在写作时

useEffect(() => {}, [genreList])

那么每次调用它的二传手setgenreList时都会调用它

你可以写

useEffect(() => {
//code here
}, [])

Answer 2

实际上，您每次都生成一个空数组，每次都使用新生成的数组更新状态，因此 useEffect 循环无限(检查 [] === [](。此外，代码中还有一个明显的错误：状态更新根本不依赖于 axios 结果，因为您不等待响应结果("then"块在 setgenreList(a( 之后执行(。在"then"函数中使用状态更新。

Answer 3

我想我会添加一个做类似实现的小答案，以及如何根据您当前的实现(基于钩子规则(至少处理条件

首先，您似乎从字面上遵循了文档，当您调用useState时，您为其提供了默认值，并将其设置为0，其中它应该是一个空数组(因为之后您用它填充了一个数组(

对于useEffect，您不需要第二个参数作为空数组(尽管这表明效果永远不会重新运行(，您也可以将其留空，但您可以验证数组中是否已经包含值，如果没有，您可以进行网络调用(您使用 axios，但为了简单起见， 我改用本机fetch(

const { useState, useEffect } = React;
const container = document.querySelector('#container');
const BreedList = () => {
const [breeds, setBreeds] = useState([]);

useEffect( () => {
if (!breeds.length) {
fetch( 'https://dog.ceo/api/breeds/list/all' )
.then( resp => resp.json() )
.then( result => {
setBreeds( Object.keys( result.message ) );
} );
}
}, [breeds] );

return (
<div>
<h1>Breeds</h1>
{ breeds.map( breed => <div key={ breed }>{ breed }</div> ) }
</div>
);
};
ReactDOM.render( <BreedList />, container );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="container"></div>