Блог

Главная - Вопросы по программированию - Как вернуть список в соответствии с выбранным элементом?

Как вернуть список в соответствии с выбранным элементом?

#javascript #reactjs #mapreduce

Вопрос:

Я все еще новичок в ReactJS и создаю проект, который работает со списком покемонов. Пользователь выбирает тип покемона, а затем я должен вернуть список в соответствии с выбором пользователя.

У меня есть список со всеми покемонами, но некоторые покемоны могут принадлежать более чем к одному типу, как показано в этом примере ниже:

введите описание изображения здесь

введите описание изображения здесь

Не могли бы вы рассказать мне, как создать список только с тем типом покемонов, который выбрал пользователь? Я думаю , что могу сделать это с помощью 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;

Заранее благодарю вас за любую помощь.

Комментарии:

1. Я рекомендую вам сузить круг ваших проблем и делиться только соответствующим кодом. Также не похоже, что вам нужен редуктор (), это должен сделать фильтр()

Ответ №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 resu<
  }, [pokemons, state]);

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

С помощью этого кода я получил ваш список, проверил детали в простом цикле, а затем извлек необходимый список…

Примечания:

  1. В ключе я установил имя и i, но это не совсем правильно, но кажется, что данные дублируются, и почему это не совсем правильно?, Так как нам нужно убедиться, что повторный рендеринг предотвращен, когда реальных изменений нет, но индекс, если порядок меняется, означает повторный рендеринг…
  2. Вы можете использовать в любом случае, например, редуктор, фильтр или создать отдельный компонент и вложить его в useMemo
  3. Вы можете улучшить стиль данных, чтобы можно было быстро проверять или извлекать данные по хэш-таблице…

ДЕМОНСТРАЦИЯ

Метки: