Как сохранить значения MultiSelect в форме реакции MultiStep с помощью хуков

Question

Я разработал многошаговую форму в реакции. Когда я создаю опцию множественного выбора в форме, значение не сохраняется в состояниях. Я использую крючки. Когда я выбираю параметры и нажимаю на следующую страницу, значения не сохраняются в массиве. Вот мой код:

import React, { useState }   from 'react';   
import Select, { components } from 'react-select';
const UserDetails = ({ setForm, formData, navigation }) => {   
    const techCompanies = [
        { label: "Apple", value: 1 },
        { label: "Facebook", value: 2 },
        { label: "Netflix", value: 3 },
        { label: "Tesla", value: 4 },
        { label: "Amazon", value: 5 },
        { label: "Alphabet", value: 6 },
      ];
      const [selectedOption,setselectedOption] = useState([]);
      const [newarray,setarray]=useState([]);

     const  handleChange = (selectedOption) => {
        setselectedOption(newarray.concat(selectedOption))
        console.log(setselectedOption)
    }
      console.log(selectedOption)

    const { next } = navigation;  
    return( 
        <div className="row justify-content-center mt-5">
            <form>  
             <h1 className="text-center prox_bold">Enter User Details</h1>
                 <Select 
                  options={ techCompanies }
                  isMulti
                  onChange={handleChange}
                  value={selectedOption}/>   
                  <div className="row justify-content-center mt-5">
                   <button className="btn green_btn w250 font22" onClick={next}>
                       Next
                   </button>    
               </div>       
           </form>
         </div>
    );
}
export default UserDetails;

Answer 1

Состояние является локальным для компонента UserDetails. Какие бы логики c у вас не были в next(), они, по-видимому, выборочно отображают UserDetails в зависимости от того, какой шаг достиг пользователь.

Это проблема, потому что когда пользователь переходит на следующий шаг, ваш UserDetails размонтируется и уничтожается и поэтому теряет свое состояние.

Решение состоит в том, чтобы иметь массив selectedOption в качестве опоры на UserDetails, и переместите handleChange вверх в родительский компонент, а также в качестве опоры на UserDetails. Сохраните selectedOption в состоянии родительского компонента, который не размонтируется при изменении шага.

<UserDetails ... selectedOption={parentStateSelectedOption} handleChange={handleChange} />

В <Select />:

<Select ... value={parentStateSelectedOption} onChange={handleChange}
                                                        ^ parent handleChange not local

В родительском компоненте, поместите событие handleChange, чтобы оно сохранялось в родительском состоянии.

Теперь, когда пользователь переходит к следующему экрану, вы благополучно сохранили выбранные параметры в родительском состоянии.