Reactjs 在层次结构中使用React钩子

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

好吧，定制挂钩是基于react提供的挂钩。主要是

useffect

和

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

从“React”导入React；
导出默认函数App（）{
const[data，setData]=React.useState（[]）；
const onClick=（）=>{
//在此处调用API并更新状态
取回（“https://jsonplaceholder.typicode.com/todos/1")
.then（（response）=>response.json（））
。然后（（json）=>{
log（json）；
setData（json）；
});
};
返回；
}
函数选项（{data，onClick}）{
返回(
数据：
{JSON.stringify（数据，null，2）}
);
}

让我们看看你做了什么你好，欢迎来到stackoverflow。请在提供您的尝试的详细信息之前，自行检查并尝试此操作。如果您有问题，请尽可能准确地描述问题、错误消息和调试完成。json响应类似于此json类似于以下| |-问卷|-主题|-问题（针对每个主题）|-单击所选选项时的回答选项（对应于每个问题），api调用将通过另一个问题获得完整的json，选项无法在此处显示代码段，但我已经创建了函数组件，topics.map（topic=>questions）questions.map（ques=>ques description）options.map（option=>onclick事件中使用挂钩的每个选项）