如何在 React 应用程序中为从 API 获取的数据列表中的每个项目创建单独的路由

Question

考虑到我在 React 应用程序中有产品列表及其各自的路线，如何在单击每个产品时对产品信息进行 API 调用？

function App() {
  const [productList, setProductList] = useState([]);
  useEffect(() => {
    axios
      .get("http://172.17.17.101:8088/api/fa/Nas/Product/GetProductNameList")
      .then(function (res) {
        console.log(res);
        setProductList(res.data.messageItems[0].data);
      })
      .catch(function (err) {
        console.log(err);
      });
  }, []);
  return (
    <div className="App">
      <ListItem productList={productList} />
    </div>
  );
}

export default function ListItem ({ productList }) {
  return (
    <List
      sx={{
        width: "100%",
        maxWidth: "40%",
        bgcolor: "background.paper",
        position: "relative",
        overflow: "auto",
        maxHeight: "80vh",
        "& ul": { padding: 0 },
      }}
    >
      {productList.map((product) => (
        <ListItemButton key={product.productId}>
          <ListItem>
            <ListItemText primary={product.productName} />
          </ListItem>
        </ListItemButton>
      ))}
    </List>
  );
}

Answer 1

有两件事需要考虑

1. 产品清单
2. 产品详情

让我们一一过一遍吧

1. 产品清单

您从 api 获取产品列表，并向前端展示该列表，其中 api 为您提供有关所有产品的所有必需数据以及用于唯一标识该产品的产品的唯一 ID。

2. 产品详情

这里您拥有的是一个包含单个产品详细信息的单个对象，其 api 调用会有所不同。

现在，我们展示了两个页面，要实现此功能，您需要做的是设置路线

我希望你知道如何在 React 中使用路由，如果你不知道，我们也可以解决这个问题，不用担心，但如果你知道，那么请转到以下步骤

运行： npm 我反应路由器 dom

像这样包装你的应用程序组件：

 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

将路线添加到您的应用程序：

<Routes>
      <Route path="/products" element={<Product />} />
      <Route path="/products/:id" element={<ProductDetails />} />
</Routes>

在这里，当单击列表中的任何产品时，它将被重定向到 products/id，其中 id 是唯一标识该产品的 ID。

例如。

产品列表中的所有产品都会有这个，因此只要点击任何产品，路线就会根据产品的id而改变

<Link to={`/products/${product.id}`}>
 Your Code Goes Here
</Link>

这是关于产品列表，现在让我们进入产品详细信息页面

使用下面的代码从url中获取id，

const { id } = useParams();

使用此 id 并将其附加到您的 api 调用，根据您的 api 调用，您将收到一个产品，其中包含通过其唯一的 id 获取的所有详细信息。