尝试使用 '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 re-renders，更新 newName 导致另一个渲染，导致无限 re-renders，

移除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

setNewName(name);
    function handleChange(e) {
      setNewName(e.target.value);
    }

handleChange函数上面不需要调用setNewName(name);。直接删除

尝试使用 'useState' 时反应太多重新呈现错误

React too many re-renders error when trying to use 'useState'

reactjs

react-hooks

use-state