在層次結構中使用 React 鈎子

Question

我是 react 新手，在我的新 react 應用程序中開發了很少的功能組件，這些組件在循環中被調用。 子組件之一，呈現單選按鈕。 在選擇單選按鈕選項時，我需要調用 webapi 並更新父 App.js 中的 state。 我一直在研究鈎子，到目前為止還不能使用內置的，正在考慮實現一個自定義鈎子。 你能建議最好的方法嗎

Answer 1

好吧，自定義鈎子是基於 react 提供的鈎子。 主要是useEffect和useState 。 我認為您只需要調用 API 並在父組件中更新 state 即可。

這是最常見的方法：

import React from "react";

export default function App() {
  const [data, setData] = React.useState([]);

  const onClick = () => {
    // Call API here and update state
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
  };

  return <Options onClick={onClick} data={data} />;
}

function Options({ data, onClick }) {
  return (
    <div>
      <h4>Data: </h4>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <input type="radio" onClick={onClick} />
    </div>
  );
}