如何在 url 参数更改后重新触发或让 useEffect 更新以显示不同的 API 响应

Question

你好，首先我要说我对 React 和一般编码还很陌生。我目前正在阅读 React Doc 并学习。很抱歉，如果这是微不足道的。

我这里有一个问题代码：https://pastebin.com/rkwS1x66 我试图根据用户点击按钮来更新 table。我相信我的逻辑在实际渲染之前是可靠的。我的点击处理功能工作正常，并且在切换时它可以通过 alert() 显示 url 更改。问题是尽管 URL 变量发生变化，但 table 不会重新呈现。我希望 table 本质上重新呈现并显示不同的 API 调用。基本上，它应该根据按钮点击动态地显示在 table 中呈现的 SWAP api 或 Pokemon api。

link 包含我的压缩代码。我的项目包含更多代码，但我认为这足以解决手头的问题。

function HeaderSection() {
 
  let baseUrl = "https://swapi.dev/api/people";
  const [data, setData] = useState([]);
  const [currentStatus , setStatus] = useState(false);
 
  let urlToggle = false;
 
  function urlChange(){
    urlToggle = !urlToggle;
    if(urlToggle)
    {
      baseUrl = "https://swapi.dev/api/people";
    }
    else
    {
      baseUrl = "https://pokeapi.co/api/v2/berry";
    }
  }
 
  
 
  useEffect(()=>{
    fetch(baseUrl)
    .then((response) =>{
      if(!response.ok)
      {
        return Promise.reject( new Error("Response Error!"));
      }
      else
      {
        return response.json();
      }
    })
    .catch ( (err) =>{
      console.log(err);
    })
    .then((json) => {
      try{
        setData(json.results);
        setStatus(true);
      }
      catch
      {
        return Promise.reject(new Error(`State Error!: Data: ${data} , Connection:${currentStatus}`));
      }
    })
    .catch((err) =>{
      console.log(err);
    })  
  },[baseUrl]);
 
  return (
    <div className='gio-main'>
     
      <div className='gio-container-3'>
       <h1>API Switch</h1>
       <h4>Endpoint request using vanilla JS displayed in custom table</h4>
       <p>You can switch between endpoints using this button!</p>
       <button onClick={urlChange}>Change API</button>
       {!currentStatus ?  <h2>Loading... </h2> : <Table data={data}/>}
      </div>
    </div>
  );
}
 
export default HeaderSection;

Answer 1

您的 useEffect 挂钩未在 baseUrl 上触发的原因并如您所料更改 data 的值是 baseUrl 不是状态。

第二个参数，useEffect期望状态的列表，并且会导致useEffect在状态改变时触发，所以使用“普通”变量不会触发钩子.

要修复它，只需将 baseUrl 更改为 useState。在您的代码中：

// change #1
const [baseUrl, setBaseUrl] = useState("https://swapi.dev/api/people");

//change #2
  function urlChange(){
    urlToggle = !urlToggle;
    if(urlToggle)
    {
      setBaseUrl("https://swapi.dev/api/people");
    }
    else
    {
      setBaseUrl("https://pokeapi.co/api/v2/berry");
    }
  }

现在，当 baseUrl 更改时，useEffect 挂钩将重新触发。

useEffect docs - 看“注释”部分

如何在 url 参数更改后重新触发或让 useEffect 更新以显示不同的 API 响应

How do I re-fire or get useEffect to update after url parameter change to show a different API response

javascript

rest

reactjs

react-hooks

use-effect