javascript - 如何在使用状态挂钩中获取多个输入字段的值

Question

我在控制输入字段时遇到错误：“组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值......”当我尝试编写时输入字段中的某些内容，它会返回状态值，这是我的代码

const [inputs, setInputs] = useState({});

useEffect(() => {
    Http.get(apiEndPoint, {
      params: {
        email: user.userEmail,
      },
    }).then((res) => setInputs(res.data));
  });

const handleChange = (e) => {
    setInputs((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

这是几个输入字段中的两个，

<Row>
               <Col className="pr-1" md="6">
                  <Form.Group>
                    <label>First Name</label>
                    <Form.Control
                      name="firstName"
                      onChange={handleChange}
                      type="text"
                      value={inputs.firstName || ""}
                    ></Form.Control>
                  </Form.Group>
                </Col>
                <Col className="pl-1" md="6">
                  <Form.Group>
                    <label>Last Name</label>
                    <Form.Control
                      name="lastName"
                      onChange={handleChange}
                      type="text"
                      value={inputs.lastName || ""}
                    ></Form.Control>
                  </Form.Group>
                </Col>
              </Row>

Answer 1

只需将输入中所需的值初始化为空字符串；

const [inputs, setInputs] = useState({ firstName:"", lastName:"" });

Answer 2

useEffect在初始渲染期间触发。然后它不会在每次重新渲染时触发并将状态更改为其初始值。

useEffect(() => {
    Http.get(apiEndPoint, {
      params: {
        email: user.userEmail,
      },
    }).then((res) => setInputs(res.data));
  },[]);