如何解决尝试使用“ useState”时反应太多的重新渲染错误
我遇到以下错误:
这是导致错误的组件代码片段:
const EditDetailsModal = ({show,handleClose}) => {
const name = useSelector(selectors.getName)
const email = useSelector(selectors.getEmail)
const phoneNumber = useSelector(selectors.getPhone)
const country = useSelector(selectors.getCountry)
const key = "AIzaSyCda4pqQF5xcyDAfA7gt61jVXcaeKeES44";
const [newName,setNewName] = React.useState();
setNewName(name);
function handleChange(e) {
setNewName(e.target.value);
}
return (
<Modal show={show} onHide={handleClose} className="editModal">
<FormContainer>
<Modal.Header className="editModalHeader" closeButton>
<Modal.Title>Edit Personal Details</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicName">
<ModalTextInput customPlaceholder="Name" value={newName} onChange={(event) => handleChange(event)}/>
</Form.Group>
如果能帮助我确定是什么原因,将不胜感激。
解决方法
您每次重新渲染时都会调用setNewName
,更新newName
会导致另一次渲染,从而导致无限的重新渲染,
删除setNewName
呼叫,并将初始值设置为React.useState(name);
const [newName,setNewName] = React.useState(name); // set the initial value of newName
// setNewName(name); // remove this line
function handleChange(e) {
setNewName(e.target.value);
}
...
,
self
无需在handleChange函数上方调用setNewName(name);
function handleChange(e) {
setNewName(e.target.value);
}
。删除它
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。