reactjs - 在层次结构中使用 React 钩子

Question

我是 react 新手，在我的新 react 应用程序中开发了很少的功能组件，这些组件在循环中被调用。子组件之一，呈现单选按钮。在选择单选按钮选项时，我需要调用 webapi 并更新父 App.js 中的状态。我一直在研究钩子，到目前为止还不能使用内置的，正在考虑实现一个自定义钩子。你能建议最好的方法吗

Answer 1

好吧，自定义钩子是基于 react 提供的钩子。主要是useEffect和useState。我认为你不需要更多的东西来调用 API 和更新父组件中的状态。

这是最常见的方法：

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>
  );
}