如何根据所选项目返回列表？答案

【问题标题】：How to return a list according to selected item?如何根据所选项目返回列表？
【发布时间】：2023-03-06 07:50:01
【问题描述】：

我仍然是 ReactJS 的初学者，我正在创建一个使用一系列口袋妖怪的项目。用户选择了pokemon的一种类型，然后我必须根据用户的选择返回一个列表。

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

您能告诉我如何创建一个仅包含用户选择的口袋妖怪类型的列表吗？我想我可以使用reducer() 做到这一点，但我不知道该怎么做。

这是我输入codesandbox的代码

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;

提前感谢您的帮助。

【问题讨论】：

我建议您缩小问题范围，只分享相关代码。看起来你也不需要 reducer()，filter() 应该这样做

标签： javascript reactjs mapreduce

【解决方案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 中
您可以增强数据样式以通过哈希表快速检查或检索数据...

Demo

【讨论】：