Javascript 使用Axios不会使用useEffect更新状态

我正在构建一个简单的组件，它接收一个单词并向后发送，然后，它获取新词，发送到字典API并显示结果。我已经创建了一个

isLoading

状态和

error

状态。当我得到不同于200的响应时，error应该为true。但在我的代码中，这并没有发生。因此，当我得到不同于200的响应时，代码尝试呈现

{dictionaryData.entry.sense[1].def}

，并崩溃

import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [anagram, setAnagram] = useState("");
  const [anagramResult, setAnagramResult] = useState("");
  const [dictionaryData, setDictionaryData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  const isFirstRun = useRef(true);
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false; //i'm using useRef to not run this code on the first run
      return;
    }

    const fetchData = async () => {
      const result = await axios(
        `http://dicionario-aberto.net/search-json/${anagramResult}`
      );
      if (result.status === 200) {
        setDictionaryData(result.data);
        console.log(result.data);
        setIsLoading(false);
        setError(false);
      } else {
        setError(true);
        setIsLoading(true);
      }
    };
    fetchData();
  }, [anagramResult]);

  const reverseWord = word => {
    setAnagramResult([...word].reverse().join``);
  };

  return (
    <div className="App">
      <input
        type="text"
        name="anagram"
        onChange={e => setAnagram(e.target.value)}
        value={anagram}
      />
      <button onClick={() => reverseWord(anagram)}>Check Anagram</button>
      <p>result: {anagramResult}</p>
      {isLoading ? null : (
        <div>
          <p>Definições: {dictionaryData.entry.sense[1].def}</p>
          <p>{dictionaryData.entry.sense[2].def}</p>
          <p>{dictionaryData.entry.sense[3].def}</p>
        </div>
      )}
      {error ? <p>Houve um erro na pesquisa ou a palavra não existe.</p> : null}
    </div>
  );
}

export default App;

import React，{useState，useffect，useRef}来自“React”；
从“axios”导入axios；
导入“/App.css”；
函数App（）{
const[anagram，setAnagram]=useState（“”）；
常量[anagramResult，setAnagramResult]=使用状态（“”）；
常量[dictionaryData，setDictionaryData]=useState（{}）；
const[isLoading，setIsLoading]=useState（true）；
const[error，setError]=useState（false）；
const isFirstRun=useRef（true）；
useffect（（）=>{
if（isFirstRun.current）{
isFirstRun.current=false；//我正在使用useRef在第一次运行时不运行此代码
返回；
}
const fetchData=async（）=>{
常量结果=等待axios(
`http://dicionario-aberto.net/search-json/${anagramResult}`
);
如果（result.status==200）{
setDictionaryData（result.data）；
console.log（result.data）；
设置加载（假）；
设置错误（假）；
}否则{
设置错误（真）；
设置加载（真）；
}
};
fetchData（）；
}，[anagramResult]）；
const reverseWord=word=>{
setAnagramResult（[…word].reverse（）.join`）；
};
返回(
setAnagram（e.target.value）}
值={anagram}
/>
反向文字（字谜）}>检查字谜
结果：{anagramResult}

{isLoading？空：(
定义：{dictionaryData.entry.sense[1].def}

{dictionaryData.entry.sense[2].def}

{dictionaryData.entry.sense[3].def}

)}
{error？是否存在一个宫殿的错误。
：null}
);
}
导出默认应用程序；

---

抱歉，有任何错误，我只是想理解挂钩。

我对您的代码做了一些更改

我将isLoading默认值设置为false，这更有意义

我用try-catch包装了“await-axios”，以处理所有类型的错误

请检查一下好吗

import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [anagram, setAnagram] = useState("");
  const [anagramResult, setAnagramResult] = useState("");
  const [dictionaryData, setDictionaryData] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(false);

  const isFirstRun = useRef(true);
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false; //i'm using useRef to not run this code on the first run
      return;
    }

    const fetchData = async () => {
      setIsLoading(true);

      try {
        const result = await axios.get(
          `http://dicionario-aberto.net/search-json/${anagramResult}`
        );
        setIsLoading(false);
        if (result.status === 200) {
          setDictionaryData(result.data);
          setError(false);
        } else {
          setDictionaryData({});
          setError(true);
        }
      } catch (error) {
        setDictionaryData({});
        setError(true);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [anagramResult]);

  const reverseWord = word => {
    setAnagramResult([...word].reverse().join``);
  };

  return (
    <div className="App">
      <input
        type="text"
        name="anagram"
        onChange={e => setAnagram(e.target.value)}
        value={anagram}
      />
      <button onClick={() => reverseWord(anagram)}>Check Anagram</button>
      <p>result: {anagramResult}</p>
      {isLoading && <p>Loading...</p>}
      {!isLoading && dictionaryData.entry && (
        <div>
          <p>Definições: {dictionaryData.entry.sense[1].def}</p>
          <p>{dictionaryData.entry.sense[2].def}</p>
          <p>{dictionaryData.entry.sense[3].def}</p>
        </div>
      )}
      {error ? <p>Houve um erro na pesquisa ou a palavra não existe.</p> : null}
    </div>
  );
}

export default App;

import React，{useState，useffect，useRef}来自“React”；
从“axios”导入axios；
导入“/App.css”；
函数App（）{
const[anagram，setAnagram]=useState（“”）；
常量[anagramResult，setAnagramResult]=使用状态（“”）；
常量[dictionaryData，setDictionaryData]=useState（{}）；
const[isLoading，setIsLoading]=useState（false）；
const[error，setError]=useState（false）；
const isFirstRun=useRef（true）；
useffect（（）=>{
if（isFirstRun.current）{
isFirstRun.current=false；//我正在使用useRef在第一次运行时不运行此代码
返回；
}
const fetchData=async（）=>{
设置加载（真）；
试一试{
const result=等待axios.get(
`http://dicionario-aberto.net/search-json/${anagramResult}`
);
设置加载（假）；
如果（result.status==200）{
setDictionaryData（result.data）；
设置错误（假）；
}否则{
setDictionaryData（{}）；
设置错误（真）；
}
}捕获（错误）{
setDictionaryData（{}）；
设置错误（真）；
设置加载（假）；
}
};
fetchData（）；
}，[anagramResult]）；
const reverseWord=word=>{
setAnagramResult（[…word].reverse（）.join`）；
};
返回(
setAnagram（e.target.value）}
值={anagram}
/>
反向文字（字谜）}>检查字谜
结果：{anagramResult}

{正在加载和加载…
}
{！isLoading&&dictionaryData.entry&&(
定义：{dictionaryData.entry.sense[1].def}

{dictionaryData.entry.sense[2].def}

{dictionaryData.entry.sense[3].def}

)}
{error？是否存在一个宫殿的错误。
：null}
);
}
导出默认应用程序；

我没有使用axios，但我认为如果服务器返回非200代码，它可能会触发一个错误，您需要在catch子句中处理该错误，即将wait包装为try and catch any error，您可以在组件上设置错误状态。例如，请看我认为您错误地颠倒了word，您应该尝试以下方法

setAnagramResult（word.split（“”.reverse（）.join（“”））@ravibagul91可以解释原因吗？