在层次结构中使用 React 钩子答案

【问题标题】：using React hooks in hierarchy在层次结构中使用 React 钩子
【发布时间】：2021-02-25 05:52:44
【问题描述】：

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

【问题讨论】：

告诉我们你做了什么
您好，欢迎来到stackoverflow。请查看How To Ask 并自行尝试，然后再提供Minimal, Complete, and Reproducible Code Example 您的尝试。如果您遇到问题，请尽可能准确地描述问题、错误消息和已完成的调试。
json响应，是这样的
Json 如下 | |-Questionaire |--Topics |--问题（针对每个主题）|--Answer Options（对应于每个问题）单击所选选项，api 调用将获得完整的 json 与另一个问题和选项 Cant show the code sn- p 在这里，但我已经创建了函数组件，topics.map(topic => questions) questions.map(ques => ques description) options.map(option => 每个带有使用钩子的 onclick 事件的选项)

标签： reactjs react-hooks subcomponent

【解决方案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>
  );
}

【讨论】：