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

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));
  },[]);

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

How to get multiple input fields's values in use state hook

javascript

forms

reactjs

controlled-component