Блог

Главная - Вопросы по программированию - Форма Redux должна отображать мои отфильтрованные значения в браузере

Форма Redux должна отображать мои отфильтрованные значения в браузере

#javascript #html #reactjs #redux #redux-form

#javascript #HTML #reactjs #redux #redux-форма

Вопрос:

Используя форму Redux, я могу получить значения, которые я ввожу в username. Я могу отфильтровать соответствующие значения, но мне нужно отобразить мои отфильтрованные значения в браузере.

 console.log("pilot.name--->", pilot.name);

Можете ли вы сказать мне, как это сделать? Я предоставил свой фрагмент кода и изолированную среду ниже. Мой связанный код находится в showResults.js:https://codesandbox.io/s/xl1r14w854 .

 var pilots = [
    {
      id: 2,
      name: "Wedge Antilles",
      faction: "Rebels"
    },
    {
      id: 8,
      name: "Ciena Ree",
      faction: "Empire"
    },
    {
      id: 40,
      name: "Iden Versio",
      faction: "Empire"
    },
    {
      id: 66,
      name: "Thane Kyrell",
      faction: "Rebels"
    }
  ];

  var rebels = pilots.filter(function(pilot) {
    // return pilot.faction === "Rebels";
    // return pilot.faction === values.username;

    if (pilot.faction === values.username) {
      console.log("pilot.name--->", pilot.name);
    }
  });

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

1. Если я использую свое имя пользователя как ‘Empire’, это работает нормально. Какова ожидаемая функциональность?

2. @ShivamGupta привет, санск за твой ответ… отфильтрованные значения Мне нужно отобразить в браузере в виде списка console.log("pilot.name--->", pilot.name);

3. вы имеете в виду, что хотите показать это пользователю, если проверка pilot.faction верна?

4. когда это условие выполняется ` if (pilot.faction === values.username) {`, тогда мне нужно показать pilot.name пользователям

5. Поскольку у вас уже есть window. предупреждение. Используйте это внутри окна if condition, like. предупреждение (pilot.name )

Ответ №1:

Я предлагаю использовать для этого отдельный редуктор. Представьте, что вы вызываете этот редуктор PilotsReducer , в котором у вас есть список пилотов в состоянии. Этот редуктор «прослушивает» определенное действие, подобное loginSubmitted , которое вы запускаете, когда получаете ответ от сервера.

Полезной нагрузкой этого действия будет имя пользователя, которое вы используете для выполнения фильтрации. Затем в reducer вы можете выполнить фильтр и установить свойство state (например, rebels ) для результата фильтра. Затем ваш компонент можно подключить к redux, чтобы выбрать rebels свойство, и он повторно отобразит, когда это свойство изменится.

Это типичный поток react / redux, он не специфичен для вашего примера

Кстати, вы можете улучшить ее, используя reselect , чтобы сохранить весь список пилотов в состоянии и отфильтровать их в selector , передав ему текущее имя пользователя. Пожалуйста, ознакомьтесь с документами и руководствами redux и повторно выберите, чтобы иметь четкое представление обо всем рабочем процессе.