代码之家 › 专栏 › 技术社区 › fatemeh lohrasbi

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

axios rest reactjs javascript

-1

fatemeh lohrasbi · 技术社区 · 2 年前

考虑到我在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>
  );
}

1 回复 | 直到 2 年前

Sanjay Tomar 2 年前

有两件事需要考虑

产品列表
产品详细信息

让我们一个接一个地检查一下这两个

产品列表

您从api中获得产品列表,并将列表显示给前端,在前端,api会为您提供有关所有产品的所有必需数据,以及唯一标识产品的产品的唯一id。

产品详细信息

这里有一个带有单个产品细节的单个对象,api调用会有所不同。

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

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

跑 npm i react路由器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获取的所有详细信息。