復選框將復選框類型的受控輸入更改為不受控制

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>

在您的例子中，您的輸入值取決於名稱、email、isSeller 和 isAdmin。 當然，這些值是在開始時定義的，但是您有一個 useEffect，您正在將值更新為user.name等。我相信這個 useEffect，您的狀態值未定義，因為您的用戶最初未定義。

附言。 這只是一個警告，您可以忽略它。 或者只是確保傳遞給輸入字段的值始終是已定義的，或者它不會從未定義 -> 已定義（即不受控制 -> 受控）過渡

Answer 2

這很可能是因為您可能在user.isSeller的響應中未定義，如此處https://stackoverflow.com/a/47012342/10212656 所述。

或者你可以簡單地添加。！ 在復選框的選中值對象中解決這個問題。