如何使用钩子以MultiStep形式保存MultiSelect值

Question

我已经在反应中开发了多步形式。当我以表格形式创建multiselect选项时，该值未保存在状态中。我正在使用挂钩。当我选择选项并单击下一页时，值不会保存在数组中。这是我的代码：

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组件的本地状态。您在next()中拥有的任何逻辑似乎都将选择性地渲染UserDetails，具体取决于用户所到达的步骤。

这是一个问题，因为当用户移至下一步时，您的UserDetails被卸载并销毁，因此失去其状态。

解决方案是将selectedOption数组作为UserDetails上的支撑，并将handleChange向上移动到父组件中，并将其作为UserDetails上的支撑。将selectedOption存储在父组件的状态下，该状态不会在更改步骤时卸载。

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

在<Select />中：

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

在您的父组件中，放置handleChange事件，使其以父状态存储。

现在，当用户移至下一个屏幕时，您已将所选选项安全地存储在父状态中。