React类组件重构为函数组件后fetch获取的数据无法正常渲染如何解决

问题原因 #

你写的函数组件问题出在useEffect里的异步请求处理逻辑上：

• 你定义的fetchAPI是异步函数，调用它时没有加await，JS不会等待接口请求全部完成就会直接执行后面的setCharacters(array)和setLoading(false)
• 这时候你用来存数据的array还是空数组，相当于你直接把空数组赋值给了characters，同时把加载状态设为了结束，所以渲染时直接走了列表渲染逻辑，空数组调用[0]自然返回undefined，访问name就抛出报错
• 后续接口请求全部完成后array虽然被填充了数据，但你没有再调用setCharacters更新状态，所以页面一直不会有内容

修复方案 #

修改useEffect部分的代码，等待异步请求全部完成后再更新状态：

useEffect(() => {
    let url = 'https://rickandmortyapi.com/api/character/';
    let array = [];
    const fetchAPI = async () => {
      for (let i = 1; i < 34; i++) {
        let response = await fetch(url);
        let data = await response.json();
        for (let j = 0; j < 20; j++) {
          array.push(data.results[j]);
        }
        url = data.info.next;
      }
      // 所有请求完成后再更新状态
      setCharacters(array);
      setLoading(false);
    }
    fetchAPI();
}, []);

其他注意点 #

你代码里输入框回调中直接console.log(nameInput)拿不到最新的输入值，是因为useState的更新是异步的，刚调用setNameInput后状态还没更新，如果你需要打印最新值，要么直接打印e.target.value，要么单独加useEffect监听nameInput的变化：

useEffect(() => {
  console.log(nameInput)
}, [nameInput])

locationInput的打印也是同理。

内容的提问来源于stack exchange，提问作者phershbe