使用 React 过滤数据库中的信息答案

【问题标题】：Filter information in the database with React使用 React 过滤数据库中的信息
【发布时间】：2021-05-05 14:37:06
【问题描述】：

我想过滤不同页面上的信息，但遇到了困难。

我有一个包含客户列表的第一页。我设法用 map 方法显示它。这是我的代码，它运行良好：

.map((customer) => {
      return (
        <TableRow hover role="checkbox" tabIndex={-1} key={customer.code}>
          <TableCell align="center">{customer.name}</TableCell>
          <TableCell align="center">{customer.description}</TableCell>
          <TableCell align="center">
            <Link style={{ textDecoration: 'none' }} to={`/customer/${customer.uuid}`}>
              <Button>View</Button>
            </Link>
          </TableCell>
        </TableRow>
      );

但我在这里阻止：我想要第二页，其中包含有关客户的研讨会列表（不是数据库中所有研讨会的列表）。这是我的数据库：客户（uuid、名称、描述）和研讨会（uuid、名称、地址、城市、国家/地区、wsp_user_uuid）。

这是我目前第二页的代码：

const ViewCustomer = () => {
    const [workshops, setWorkshops] = useState([]);

useEffect(() => {
    const getWorkshops = async () => {
      const result = await axios.get("http://zzzz/workshop");
      setWorkshops(result.data);
    };
    getWorkshops();
  }, []);

const tableHeader = columns.map((column) => (
    <TableCell
      key={column.id}
      align={column.align}
      style={{ minWidth: column.minWidth }}
    >
      {column.label}
    </TableCell>
  ));

const mainContent = workshops
    .map((workshop) => {
      return (
        <TableRow hover role="checkbox" tabIndex={-1} key={workshop.code}>
          <TableCell align="center">{workshop.name}</TableCell>
          <TableCell align="center">{workshop.adress}</TableCell>
          <TableCell align="center">{workshop.city}</TableCell>
          <TableCell align="center">{workshop.country}</TableCell>
        </TableRow>
      );
    });



    return (
            <Table stickyHeader aria-label="sticky table">
                <TableHead>
                  <TableRow>{tableHeader}</TableRow>
                </TableHead>
                <TableBody>{mainContent}</TableBody>
              </Table>
    );
};

export default ViewCustomer;

你有什么建议或提示让我成为制作第二页的过滤器吗？

【问题讨论】：

您在做这件事的哪一部分遇到了麻烦？如何查询数据库？如何获取该数据？如何更新页面？
我编辑我的帖子以获取更多信息。我正在寻找过滤我的第二页。目前我有一个使用 map 方法的所有研讨会的列表，但我希望应用过滤器并且只有一个客户的所有研讨会

标签： reactjs filter

【解决方案1】：

据我了解，您只想显示 wsp_user_uuid 等于选定客户的车间数据。如果是这样 - 首先你应该将 customerId 传递给 ViewCustomer 组件。示例：const ViewCustomer = ({customerId}) => {...

第二。在渲染车间数据之前使用过滤器

const mainContent = workshops
    .filter( w => w.wsp_user_uuid === customerId )
    .map((workshop) => {

最后，组件的用法应该类似于<ViewCustomer customerId={selectedCustomer.uuid} />

【讨论】：

是的，就是这样，谢谢！我希望车间的 wsp_user_uuid 等于客户的 uuid。但我不明白我应该把组件放在哪里<ViewCustomer customerId={selectedCustomer.uuid} />
在您使用该组件的页面上。正如我看到你使用uuid 作为路由参数 - 所以你会在页面上得到它在<Route path="/customer/:uuid" children=<ThePageYouLookingFor /> /> 里面ThePageYouLookingFor 你应该使用像const {uuid} = useParams() 这样你可以在渲染部分使用像@ 987654331@
抱歉，我不明白为什么我需要在第二个组件上制作组件以及放置它的位置。我有一个第一页页面"/customer"，其中包含一个客户列表和一个查看按钮作为第一个代码。当我单击它时，我会使用我的第二个代码进入第二页"/customer/: uuid"，其中我将“/workshop”与 get 和 axios 映射。我以为我只需要一个过滤器
只在第二页使用const {uuid} = useParams()，而不是const mainContent = workshops.filter( w => w.wsp_user_uuid === uuid ).map((workshop) => {
是的，它终于起作用了，我也找到了这个解决方案。谢谢你！