Question

我正在尝试通过单击按钮将项目推入数组来更新状态对象中的数组。我正在获取状态副本，更新该副本并将状态设置为该副本。期望一旦将项目推入，就会在页面映射到该数组并添加选择时将新的select元素添加到页面。但是，仅在第二次单击后才执行此操作。在使用React开发工具进行检查之后，第一次单击并不会更新数组，这让我觉得组件没有重新加载。不确定为什么要更新状态。

用于触发功能的按钮：

<Col xl={6}>
              
  <button onClick={(e) => renderSelects(e)}>Add</button>
                
</Col>

函数本身：

const renderSelects = (e: any) => {

        e.persist();
        let id = userData.languages.length + 1;
        let language = new Language(id, "Please select an option");
        let data: any = userData;
        data.languages = [...data.languages, language];
        setUserData(data);
}

选择元素：


<Row>
   {
      userData.languages.map((language: Language, key: any) => {

          return (
                <Col xl={6} key={key}>
                       <Form.Group controlId="formGroupName">
                            <Form.Label>Native in</Form.Label>
                                   <Select
                                        authid={`language${key}`}
                                         type="text"
                                         required
                                         errortext="Please select an option."
                                         inputchange={inputChangeHandler}
                                         languages={allLanguages}
                                         userlanguages={userData.languages}
                                         initialvalue={language.name} />
                        </Form.Group>
                 </Col>)
         })
    }
</Row>

关于如何立即实现此更新而没有延迟的任何建议吗？

更新嵌套对象时

0 个答案: