复选框将类型复选框的受控输入更改为不受控

Question

我在更新isSeller选项时遇到此错误，它适用于管理员，但不适用于卖家。

警告：组件正在更改要控制的文本类型的非受控输入。输入元件不应从非受控切换到受控(反之亦然(。决定在部件的使用寿命内使用受控或非受控输入元件。*

以下是我的代码：

import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { detailsUser } from '../actions/userActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
export default function UserEditScreen(props) {
const userId = props.match.params.id;
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [isSeller, setIsSeller] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const userDetails = useSelector((state) => state.userDetails);
const { loading, error, user } = userDetails;
const dispatch = useDispatch();
useEffect(()=>{
if(!user){
dispatch(detailsUser(userId));
}
else{
setName(user.name);
setEmail(user.email);
setIsSeller(user.isSeller);
setIsAdmin(user.isAdmin);
}
},[dispatch, user, userId])
const submitHandler = (e) => {
e.preventDefault();
};
return (
<div>
<form className="form" onSubmit={submitHandler}>
<div>
<h1>Edit User {name}</h1>
{loading && <LoadingBox></LoadingBox>}
{error && (
<MessageBox variant="danger">{error}</MessageBox>
)}
</div>
{loading ? (
<LoadingBox />
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<>
<div>
<label htmlFor="name">Name</label>
<input
id="name"
type="text"
placeholder="Enter name"
value={name}
onChange={(e) => setName(e.target.value)}
></input>
</div>
<div>
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
></input>
</div>
<div>
<label htmlFor="isSeller">Is Seller</label>
<input
id="isSeller"
type="checkbox"
checked={isSeller}
onChange={(e) => setIsSeller(e.target.checked)}
></input>
</div>
<div>
<label htmlFor="isAdmin">Is Admin</label>
<input
id="isAdmin"
type="checkbox"
checked={isAdmin}
onChange={(e) => setIsAdmin(e.target.checked)}
></input>
</div>
<div>
<button type="submit" className="primary">
Update
</button>
</div>
</>
)}
</form>
</div>
);
}

Answer 1

当您的值从未定义值更改为已定义值或从已定义值更改时，会出现此警告。

对于。例如

import React, {useState} from 'react'

const MyComponent = () => {
const [email, setEmail] = useState() // Look, the value of email will be undefined in the begining

return (
<input type="text" value={email}
{/* You can put value={email || ''} or value={isSeller || false} to fix this, so that the value passed to input is always defined or otherwise you need to make sure that the state value is never undefined */}
onChange={(e) => setEmail(e.target.value)} 
/>
)
}
export default MyComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在您的情况下，您的输入值取决于名称、电子邮件、isSeller和isAdmin。当然，这些值是在一开始就定义的，但您有一个useEffect，将值更新为user.name等。我相信在这个useEffect中，您的states值会变得未定义，因为您的用户最初是未定义的。

PS。这只是一个警告，您可以忽略它。或者只需确保传递给输入字段的值始终是定义的，或者它不会从未定义转换->定义的(即不受控制的->受控的(

Answer 2

这很可能是因为您可能在user.isSeller的响应中未定义，如下所述https://stackoverflow.com/a/47012342/10212656.

或者你可以简单地添加！！在复选框的检查值obj中解决此问题。