使用 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 循环或类似的东西，但有点困惑如何过滤可以映射的 Claims 。

基本上希望它是，对于带有 Project == {this.props.match.params.Project} 的声明：地图声明。

感谢任何帮助:)

谢谢

Answer 1

所以基本上 filter 也返回一个新的数组副本，你可以在这里阅读更多，但问题是你不能创建 jsx 元素，如果你想了解更多，你可以阅读这个问题

所以在你的情况下，你需要先过滤，然后你需要使用地图渲染 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 中，您需要输入启用或禁用才能查看用户。 我希望这能让您更好地了解您的问题。

工作代码沙盒