为什么反应 useState 不更新值？

Question

我正在使用 API 来获取数据，但为了获取所有数据，我需要循环遍历 links

 const [characterData, setCharacterData] = useState([]);
 const [link, setLink] = useState("https://swapi.dev/api/people/");

    useEffect(() => {
        getData();
    }, [])

    async function getData() {
        while (link) {
            const fetchedData = await fetch(link);
            const jsonData = await fetchedData.json();
            setCharacterData([...characterData, jsonData.results]);
            setLink(jsonData.next);
            console.log(link)
        }
        
    }

这是上面的 jsonData 之一的样子：

{ "next": "http://swapi.dev/api/people/?page=2", "previous": null, "results": [所需数据列表]}

最后一个对象将有 "next": null，所以 while 循环应该在某个时候结束，但由于某种原因 setLink() 永远不会更新 link 并导致它变成无限循环。 Link 始终保持为“https://swapi.dev/api/people/”。

另一个问题是当 characterData 更新时页面没有显示任何内容，所以我假设 characterData 也没有更新，但我不确定。

characterData.map((character, index) => {
      return (
           <div className="character-item" key={index}>
               <h4>{character.name}</h4>
               <p>{character.birth_year}</p>
           </div>
      );
})

注意：每个角色都是一个对象

谢谢！

Answer 1

link 是用 const 声明的 - 它在给定的渲染中永远不会改变。所以

while (link) {

将运行永远。

除非您在别处使用 link，否则我会将其从状态中完全删除，并在 getData 中使用局部变量。确保也使用 setCharacterData 的回调形式，这样你就不会丢失状态中的先前值。

async function getData() {
    let link = 'https://swapi.dev/api/people/';
    while (link) {
        const fetchedData = await fetch(link);
        const jsonData = await fetchedData.json();
        setCharacterData(characterData => [...characterData, jsonData.results]);
        link = jsonData.next;
    }
}

捕获可能的错误也是一个好主意：

useEffect(() => {
    getData()
        .catch(handleErrors);
}, [])

为什么反应 useState 不更新值？

Why is react useState not updating the values?

javascript

reactjs

fetch-api

use-state