Question

完整的错误消息与此有关：

这是我使用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挂钩之外使用异步函数，但我不知道如何

Answer 1

@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可以防止多次设置信息。

Answer 2

您还可以在异步功能上使用try and 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();
 }, []);

如何解决“无法在已卸载的组件上执行React状态更新。”

2 个答案: