如何解决“无法对未安装的组件执行 React 状态更新。”答案

【问题标题】：How to resolve "Can't perform a React state update on an unmounted component. "如何解决“无法对未安装的组件执行 React 状态更新。”
【发布时间】：2020-10-05 01:34:57
【问题描述】：

完整的错误信息是这样的：

这是我使用 axios 编写的用于使用 ny times API 的代码。

export default function App() {
  const [info, setInfo] = useState([]);

  // Load dos dados da api
  useEffect(() => {
    async function loadNews() {
      const response = await api.get('/arts.json');

      const { results } = response.data;

      console.log(results);
      setInfo(results);
    }

    loadNews();
  }, []);

  return (
    <>
      <Main>
        <Title>Technology</Title>
        <Content>
          {info.map(news => <Text key={news.url}>{news.title}</Text> )}
        </Content>
        <Title>Science</Title>
      </Main>
    </>
  );
}

是加载这些json对象的更好方法。可能包括分页？为什么它给我这个错误？我应该在 useEffect 挂钩之外使用异步函数，但我不知道如何

【问题讨论】：

这能回答你的问题吗？ Can't perform a React state update on an unmounted component

标签： reactjs react-native axios

【解决方案1】：

您还可以在异步函数中使用 try 和 catch 块

useEffect(() => {
const loadNews = async () => {
    try {
        const response = await axios.get('arts.json');
        const { results } = response.data;
       console.log(results);
       setInfo(results);
      } catch (err) {
        // Handle Error Here
        console.error(err);
     }
     };

    loadNews();
 }, []);

【讨论】：

【解决方案2】：

@Ajeet 发布的链接中提到的不错的小技巧：

export default function App() {
  let isMount = false;
  const [info, setInfo] = useState([]);

  // Load dos dados da api
  useEffect(() => {
    isMount = true;
    async function loadNews() {
      const response = await api.get('/arts.json');

      const { results } = response.data;

      console.log(results);
      setInfo(results);
    }

    if (isMount) loadNews();
  return ()=>{isMount = false};
  }, []);

  return (
    <>
      <Main>
        <Title>Technology</Title>
        <Content>
          {info.map(news => <Text key={news.url}>{news.title}</Text> )}
        </Content>
        <Title>Science</Title>
      </Main>
    </>
  );
}

看代码，如果在loadNews()之后做一个console.log；您可能会看到多个渲染。拥有 isMount 将防止多次设置信息..

【讨论】：