javascript - 如何根据所选项目返回列表？

问题描述

我仍然是 ReactJS 的初学者，并且我正在创建一个使用宠物小精灵列表的项目。用户选择一个类型的pokemon，然后我必须根据用户的选择返回一个列表。

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

你能告诉我如何创建一个只包含用户选择的口袋妖怪类型的列表吗？我想我可以使用来做到这一点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;

预先感谢您的任何帮助。

标签： javascriptreactjsmapreduce

你有很多方法可以做到这一点，但是由于你还在学习并且你得到了很好的代码，我将为你介绍 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>;

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

笔记：

在键中我设置了名称和i，但它并不完全正确，但似乎数据存在重复，为什么它不完全正确？，因为我们需要确保在没有真正变化时防止重新渲染，但如果索引订单更改意味着重新渲染...
您可以使用任何方法，例如 reducer、filter，或创建一个单独的组件并将其嵌套在 useMemo 中
您可以增强数据样式以通过哈希表快速检查或检索数据...

演示

javascript - 如何根据所选项目返回列表？

问题描述

解决方案

推荐阅读