如何return根据选中的项目列出一个列表？

Question

我仍然是 ReactJS 的初学者，我正在创建一个与口袋妖怪列表一起工作的项目。用户选择一种宠物小精灵，然后我必须return根据用户的选择列出一个列表。

我有一个包含所有口袋妖怪的列表，但有些口袋妖怪可以属于不止一种类型，如下例所示：

你能告诉我如何创建一个只包含用户选择的宠物小精灵类型的列表吗？我想我可以使用 reducer() 来做到这一点，但我不知道该怎么做。

的代码

import React from "react";
import { useHistory } from "react-router-dom";
import { Button } from "@material-ui/core";

import { types } from "./data";

import "./styles.css";

const App = () => {
  const history = useHistory();
  const handleType = (type) => {
    history.push({
      pathname: "/list",
      state: type
    });
  };

  return (
    <div className="content">
      <h3>Pokémon Types</h3>
      {types.results.map((type) => (
        <Button
          key={type.name}
          style={{
            margin: "5px"
          }}
          variant="contained"
          onClick={() => handleType(type.name)}
        >
          {type.name}
        </Button>
      ))}
    </div>
  );
};

export default App;

import React from "react";
import { useLocation } from "react-router-dom";

import { pokemons } from "../data";

const List = () => {
  const { state } = useLocation();

  console.log("state: ", state);
  console.log(pokemons);

  return <div>List</div>;
};

export default List;

提前感谢您的帮助。

Answer 1

你有很多方法可以做到这一点，但由于你仍在学习并且你已经获得了很好的代码，我将为你介绍 useMemo：

可以加上useMemo来记忆和处理数据，然后直接得到结果...

看这个例子：

  const pk = useMemo(() => {
    if (!state) return "State Empty!";

    let result = [];
    pokemons.forEach((v, i) => {
      if (v.type.includes(state)) {
        result.push(<li key={v.name + i}>{v.name}</li>);
      }
    });

    return result;
  }, [pokemons, state]);

  return <ul>{pk}</ul>;

通过这段代码，我得到了你的列表，在一个简单的循环中检查详细信息，然后检索所需的列表...

备注：

在key中我设置了name和i，但是不完全正确，但是好像数据有重复，为什么不完全正确？，因为我们需要确保在不真实的时候防止重新渲染更改，但索引如果顺序更改意味着重新渲染...
你可以像 reducer、filter 一样使用，或者创建一个单独的组件并将它嵌套在 useMemo
您可以增强数据样式以通过哈希快速检查或检索数据table...

Demo

如何return根据选中的项目列出一个列表？

How to return a list according to selected item?

javascript

reactjs

mapreduce