Как отфильтровать список в соответствии с выбором слайдера?

#javascript #reactjs

Вопрос:

Мне нужно отфильтровать массив объектов в соответствии с выбором пользователя в Slider . Но функция фильтра, которую я выполняю, не работает:

Не могли бы вы сказать мне, что я делаю не так?

Вот мой код, который я поместил в codesandbox.

 import React from "react";
import Slider from "@material-ui/core/Slider";
import { dataJobParams } from "./dataJobParams";

import "./styles.css";

const App = () => {
  const marks = [
    {
      value: 0,
      label: "Small"
    },
    {
      value: 33,
      label: "Medium"
    },
    {
      value: 66,
      label: "Large"
    },
    {
      value: 100,
      label: "Extra Large"
    }
  ];

  const onHandleSlider = (value) => {
    const _value = dataParams(value);
    filteredParams(_value);
  };

  const filteredParams = (value) => {
    const filterParams = Object.keys(dataJobParams).filter(
      (el) => el === value
    );

    return filterParams;
  };

  const dataParams = (value) => {
    if (value === 0) {
      const param = "small_data_load";
      return param;
    }

    if (value === 33) {
      const param = "medium_data_load";
      return param;
    }

    if (value === 66) {
      const param = "large_data_load";
      return param;
    }

    if (value === 99) {
      const param = "extra_large_data_load";
      return param;
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {console.log("filteredParams: ", filteredParams())}
      <Slider getAriaValueText={onHandleSlider} step={33} marks={marks} />
    </div>
  );
};

export default App;

Ответ №1:

когда я использую console.log внутри filteredParams , результат хороший.

   const filteredParams = (value) => {
    const filterParams = Object.keys(dataJobParams).filter(
      (el) => el === value
    );
    console.log("filteredParams: ", filterParams)
    return filterParams;
  };

У вас пустой массив, потому что вы не используете никаких параметров при вызове {console.log("filteredParams: ", filteredParams())}

1. Эй, Nokwiw, но это, например , возвращает только строку "extra_large_data_load" , но я бы хотел, чтобы она возвращала все элементы, содержащиеся в массиве extra_large_data_load в dataJobParams.

2.в таком случае, вы dataJobParams[filterParams] console.log("filteredParams: ", dataJobParams[filterParams])

3. Эй, dataJobParams[filterParams]) Ноквиу, этот способ идеально подходит для меня. Спасибо

Ответ №2:

ПРАВКА: дайте мне знать, если это сработает.

   const onHandleSlider = (value = "small_data_load") => {
    const _value = dataParams(value);
    const finalValue = filteredParams(_value);
    console.log({ finalValue });
  };

  const filteredParams = (value = "small_data_load") => {
    console.log(value);
    const getValues = Object.entries(dataJobParams);
    const filtredValues = getValues.filter((el) => el[0] === value);
    return {
      name: value,
      values: filtredValues[0][1]
    };
  };

1. Эй, Филипе, но как я могу вернуть предметы, medium_data_load например?

2. @vbernal Я редактирую какой-то код, дайте мне знать, если сработает.

3. Хью Филипе, эта работа тоже, большое тебе спасибо.