javascript - 使用 React Redux 和 Firebase 按值过滤表

Question

我正在尝试通过 firebase 文档中的值过滤 React 组件中的表格。

重要的代码如下所示。声明正在被解析为表行的另一个组件。

class Claims extends Component {
  componentDidMount() {
    this.props.getClaims();
  }
  render() {
    const { Claims, loading } = this.props.data;
    let recentClaimsMarkup = !loading ? (
      Claims.map(Claim => <ClaimsTable Claim={Claim} />)
    ) : (
      <p>Loading...</p>
    );
    return (
      <Grid>
        <Paper className = {mergeClasses.root}>
          <Typography> {this.props.match.params.Project} Claim's</Typography>{" "}
        </Paper>
        <Paper className={mergeClasses.root}>
          <Table className={mergeClasses.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Claim ID</TableCell>
                <TableCell align="right">Date received</TableCell>
                <TableCell align="right">Progress</TableCell>
                <TableCell>Edit Claim</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>{recentClaimsMarkup}</TableBody>
          </Table>
        </Paper>

我想通过 url 项目过滤它，如下所示

{this.props.match.params.Project}

这是由于声明与项目名称相关。

如果这是在 Python 中，我只会使用 for 循环或类似的东西，但有点困惑如何过滤能够映射的声明。

基本上希望它是，对于 Project == {this.props.match.params.Project} 的声明:映射声明。

感谢任何帮助:)

谢谢

Answer 1

所以基本上过滤器也会返回数组的新副本，您可以阅读更多内容 here ，但问题是你无法创建 jsx 元素，如果你想了解更多你可以阅读这个question

因此，在您的情况下，您需要首先进行过滤，然后需要使用如下所示的 map 渲染 jsx 元素

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

import "./styles.css";

const User = props => {
  const claimsUserHasAccess = props.data.claims.filter(
    claim => claim.project === props.match.params.access
  );
  return (
    <>
      {claimsUserHasAccess.map(claim => (
        <p key={claim.name}>{claim.name}</p>
      ))}
    </>
  );
};

const userData = {
  claims: [
    { project: "enabled", name: "job" },
    { project: "enabled", name: "nick" },
    { project: "disabled", name: "jef" }
  ]
};

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route
          path="/user/:access"
          render={props => <User data={userData} {...props} />}
        />
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在 url 中，您需要输入启用或禁用才能查看用户。我希望这能让您更好地了解您的问题。

正在工作codesandbox