使用 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 中，您需要輸入啟用或禁用才能查看用戶。 我希望這能讓您更好地了解您的問題。

工作代碼沙盒