javascript - 数据属性 react 的选项

Question

我有一个需要更多 API 调用的应用程序，因此我的第一个 API 调用比获取 20 个对象要多，其中每个对象都有一个独立的 ID。第二个 API 调用是根据第一个调用对象的 ID 进行的。

所以我的组件:

<div>
      <table cellSpacing="0">
        <thead>
          <tr></tr>
        </thead>
        <tbody>{branded_food_data}</tbody>
      </table>
      <br></br>
      <table cellSpacing="0">
        <thead>
          <tr></tr>
        </thead>
        <tbody>{common_food_data}</tbody>
      </table>
    </div>

常见和品牌是

 <td className="single" style={{ width: "300px" }}>
      <span>{name}</span>
      <img
        src={thumbnail}
        alt="thumb"
        height="25px"
        width="25px"
        style={{ float: "right", marginRight: "5px", borderRadius: "1px" }}
      ></img>
    </td>

通用和品牌来自第一个 API 调用，并包含第二个 API 调用的 ID。

现在，我想设置 react ，以便每当有人单击渲染的公共(public)/品牌的一个 item() 时进行第二个 API 调用，所以我认为我能做到的唯一方法是从首先调用并为每个设置一个数据属性，这样当我单击它时，我将在主组件中设置 ID 的状态并获取该 ID 上的数据。据我所知，是否有任何替代方案，这不是一个好的做法。

TL:博士

组件 -> (a)API 调用 -> {名称/ID} -> 渲染(多个表行) -> 单击一个渲染的表行 -> 获取单击的表行的 ID -> (b) 对 ID 进行 API 调用单击的表格行 -> 渲染

如何在每个特定行的第一次调用中设置特定的 IDS？

Answer 1

这里的答案可能取决于您希望用户体验如何在您的应用程序中工作以及您希望如何设计数据获取。

例如，单击一行可能只是链接(或者您可以使用代码来手动获取数据并更新 URL)，这会将应用程序的 URL 更新为 /branded_food_data/:id_of_record 。分配一个组件来处理该路由器 URL，以便您可以获取该记录的数据并显示它。更新 URL 并让路由器安装所需的组件还可以让您直接导航到特定记录(深层链接)。

即使您决定不更改 URL，也不需要为此使用数据属性。当您迭代行时，您可以定义 onClick处理程序并将其传递给 id您正在渲染的每一行的属性。例如。下面

const Table = ({rowsOfData, fetchById}) => (
  rowsOfData.map(({id, name}) => (
    <tr onClick={(e) => fetchById(id)}>
      <td>{name}</td>
      ...
    </tr>
  ))
);

在 <Table /> 的父级中，您需要获取初始数据行并定义对 fetchById 的回调。例如

const Main = (props) => {
  const [data, setData] = useState(null);
  const fetchById = id => ... // calls your endpoint and you handle the response
  const fetchInitial = () => ... // fetch initial rows without any id

  // only run this effect once, on initial mount
  useEffect(() => {
    fetchInitial().then(response => setData(response.data))
  }, []);

  return (
    <Table 
      data={data} 
      fetchById={fetchById} 
    />
  );
};