React.js 使用嵌套状态控制组件

Question

问题：如何从表单中的 [data] 更新嵌套状态而不会出现任何错误。 我现在这样做的方式有效，但它在控制台中引发了一个错误。 从表单更新嵌套 state 的正确方法是什么。

我知道数据被初始化为空，这仅仅是因为它是在使用 useEffect 加载页面时设置的。

编码：

 const [data, setData] = useState({});

    <Form.Group className="mb-3">
        <Form.Label>Title</Form.Label>
        <Form.Control
            required
            placeholder="Enter title"
            value={data?.title}
            onChange={(e) => setData({...data, title: e.target.value})}
        />
        {formError?.title?.length > 0 ? <Form.Label className="text-danger">{formError?.title}</Form.Label> : null}
    </Form.Group>

Answer 1

React 会将其视为不受控制的组件，因为value属性最初是undefined的，并且您将其设置为string on Change of value 。

对于不受控制的输入，我们不会传递value属性。 如果我们不传递任何属性，则将其视为undefined 。 在这里，您首先将其设置为undefined ，然后再设置一些值，从而使您感到困惑。 这就是为什么您changing from uncontrolled to controlled input警告。

在 state 中提供默认值以将其用作受控输入。

const [data, setData] = useState({title: ""});

或value={data?.title || ""} value={data?.title || ""}

查看更多受控/非受控组件