React中的加载状态：太多的重新呈现。React限制呈现次数以防止无限循环

Question

function App() {
    const [items, setItems] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    if (items.length == 0) loadMore()
    return <div>
        {isLoading
            ? <div>Loading...</div>
            : <ol>{items.map(i => <li>{i}</li>)}</ol>
        }
        <button disabled={isLoading} onClick={loadMore} style={{ width: "100%" }}>
            {isLoading ? "Loading..." : "Load again"}
        </button>
    </div>;

    function loadMore() {
        setIsLoading(true); // ⚠ errors!
        const uri = "https://www.reddit.com/r/reactjs.json";
        fetch(uri)
            .then(r => r.json())
            .then(r => {
                const newItems = r.data.children.map(i => i.data.title);
                items.push(...newItems);
                setItems([...items]);
                setIsLoading(false);
            });
    }
}

斯塔克布利茨链接。

Answer 1

这是由于以下条件if(items.length==0)loadMore()。

因为在开始时长度为0，所以调用loadMore来设置状态，并再次输入调用loadMore的条件，以此类推。

使用useEffect挂钩与一个空的依赖项数组，而不是在组件挂载时调用一次函数的条件。

useEffect(loadMore, [])