处理程序更改 Select React js 中的输入对象

Question

我从 Api 映射了选项 select 数据，但我在更改 select 输入的值时遇到问题 我使用此处理程序更改，但输入始终无法更改值修复我的代码中的错误是什么？ 我怎样才能改变输入值 我的错误是这样的，请看 link 视频

https://github.com/JedWatson/react-select/issues/796

同一组件中的所有代码

初始值

const initialStates = {
         rug: {nom: "", id: "" }
    }


    const [currentStates, setCurrentStates] = useState(initialStates);

处理变更方法

    const handleChange = event =>{
        setCurrentStates({ ...rugList[event.target.value].drug.id });
    };

Select输入

  <Form.Group as={Col} controlId="formGridDrug">
                                                        
<Form.Label> Select</Form.Label>
                                                       
 <Form.Control required as="select"
                                                          
  type="text"
                                                           
 id="rug.id"
                                                           
 name="rug.id"
                                                           
 value={currentStates.rug.id}
                                                           
 className={"bg-white text-dark"}
                                                           
 onChange={handleChange}
                                                      
  >
                                                         
   <option value="">Choice select</option>
                                                           
 {rugList.map((value) =>
                                                               
 <option value={value.id} key={value.id}>
                                                                  
  {value.nom}
                                                               
 </option>
                                                            
)}

                                                       
 </Form.Control>

                                                   
 </Form.Group>

Answer 1

rugList 是一个包含形状为 {id , nom } 的对象的数组。您的 handleChange 需要在 rugList 找到一个对象 id 属性 匹配 event.target.value 以正确设置 currentStates:

  const handleChange = event => {
      const rug = rugList.find(({ id }) => id === event.target.value);
      if(rug) setCurrentStates({ rug });
  };