使用效果继续获取数据并重新渲染组件

Question

我本周刚刚开始构建项目和新的教程地狱，所以请轻松，我的代码也可能很粗糙。

我正在尝试在按钮点击的组件中渲染“ RandomAdvice”，但它只是继续重新渲染并进行API调用。

只有当我尝试将建议添加到要显示的组件中时，这不会发生这种情况。

代码在下面

function App() {
  const [randomAdvice, setRandomAdvice] = useState({
    id: '',
    advice: '',
  });

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.adviceslip.com/advice');
      const data = await response.json();

      setRandomAdvice(data);
    };

    fetchData();
  }, [randomAdvice]);

  const setAdvice = () => {
    setRandomAdvice({ ...randomAdvice, advice: randomAdvice.slip.advice });
  };
  const setId = () => {
    setRandomAdvice({ ...randomAdvice, advice: randomAdvice.slip.id });
  };

  const getAdvice = () => {
    setAdvice();
    setId();
    console.log(randomAdvice.slip.advice, randomAdvice.slip.id);
  };
// work well when I click the button it gets logged to the console but once I try to uncomment so it renders on the dom, it just keeps re-rendering



return (
    <div className='App'>
      <p>How far</p>
      {/* {randomAdvice && <p>{randomAdvice.slip.advice}</p>}
      {randomAdvice && <p>{randomAdvice.slip.id}</p>} */}
      <button onClick={getAdvice}>generate random advice</button>
    </div>
  );

Answer 1

由于 useEffect 实现，您的代码会产生无限的重新渲染。您正在更新一个状态，该状态也是 useEffect 的依赖项，因此它会触发重新渲染。

我已更新您的代码以防止出现此问题：

function App() {
  const [randomAdvice, setRandomAdvice] = useState({
    id: '',
    advice: '',
  });

  const fetchData = async () => {
    const response = await fetch('https://api.adviceslip.com/advice');
    const { slip } = await response.json();

    setRandomAdvice(slip);
  };

  const getAdvice = () => {
    fetchData();
  };

  return (
    <div className="App">
      <p>How far</p>
      {randomAdvice && <p>{randomAdvice.advice}</p>}
      {randomAdvice && <p>{randomAdvice.id}</p>}
      <button onClick={getAdvice}>generate random advice</button>
    </div>
  );
}

此外，请确保在用户单击按钮时有一个处理程序，以防止同时发送多个请求。例如，一旦承诺尚未解决，将其设置为禁用。

编辑：我还从响应中解构了 slip 以匹配您的状态结构。

---

编辑：您还可以使用以下代码简化返回语句： >

<div className="App">
  <p>How far</p>
  {randomAdvice && (
    <>
      <p>{randomAdvice.advice}</p>
      <p>{randomAdvice.id}</p>
    </>
  )}
  <button onClick={getAdvice}>generate random advice</button>
</div>