尝试使用“ useState”时反应太多的重新渲染错误

Question

我遇到以下错误：

这是导致错误的组件代码片段：

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>

如果能帮助我确定是什么原因，将不胜感激。

Answer 1

您每次重新渲染时都会调用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);
}

...

Answer 2

self

无需在handleChange函数上方调用setNewName(name); function handleChange(e) { setNewName(e.target.value); } 。删除它