練習項目

これは簡単な練習項目で、双方向バインド、高度な通信、ユーザーステータスの管理、stateによるユーザーリストの管理、再利用可能な構成部品の使用を学習します.

難点

最初に、ユーザーの入力値を検証する過程で、次のコードを作成しました.
しかし私が考えた結果、isValidName、isValidAgeの状態はすぐに変わっていないので、ずっと時間を無駄にしていました.🙄🙄
理由は!
これは,関数にstate変更が発生した場合,関数終了後に変更が発生することを知らないためである.

const NewForm = () => {
	const [name,setName] = useState('')
    const [age,setAge] = useState('')
   	const [isValidName, setIsvalidName] = useState(true)
    const [isValidAge, setIsValidAge] = useState(true)
    
    const checkName = () => {
    	if(name.trim().length === 0) setIsvalidName(false)
    }
    const checkAge = () => {
    	if(age.trim().length === 0) setIsvalidName(false)
        if(+age < 0) setIsvalidName(false)
    }
    const submitHandler = (event) => {
        event.preventDefault();
    	checkName()
        checkAge() 
        if(isValidName && isValidAge) {
        	/*
            	유저 객체 생성 및 전달 받은 props 함수를 통해 
                부모 컴포넌트로 유저 데이터 전달
                name, age의 state를 ''으로 저장
            */
        }else{
        	// 에러 모달창 state 값 변경  
        }
    }
}

したがって、stateを使用せずにコードを変更して、必要な結果を得ることができます.😃🤣

const NewForm = () => {
	const [name,setName] = useState('')
    const [age,setAge] = useState('')
	if (name.trim().length === 0 || age.trim().length === 0) {
            // 에러 메세지 저장 및 에러 모달 state 변경
            return;
        }
        if (+age < 0 || +age > 100) {
            // 에러 메세지 저장 및 에러 모달 state 변경
            return;
        }
        /*
           유저 객체 생성 및 전달 받은 props 함수를 통해 
           부모 컴포넌트로 유저 데이터 전달
           name, age의 state를 ''으로 저장
        */
    };
}

その他の内容

また,ユーザリストリストを消去するボタンも実現した.
userListタイトルページ