在更新道具上反應更新組件

Question

嗨，我正在使用React鈎子，我在這里構建LogIn組件：

    const [inputs, updateInputs] = useState(
    [
        {
            type: 'email',
            label: 'Email',
            name: 'email',
            value: '',
            error: false
        },
        {
            type: 'password',
            label: 'Password',
            name: 'password',
            value: '',
            error: false
        }
    ]
    );

    const renderInputs = () => {
        const inputsArr: typeof Input = [];

        inputs.map((item, i) => {
            inputsArr.push(
            <Input key={i} type={item.type} label={item.label} name={item.name} error={item.error}
                   onChange={inputOnChange}/>
            );
        });

        return inputsArr;
    };

    const onButtonClick = useCallback(() => {
        const data = {
            email: inputs[0].value,
            password: inputs[1].value
        }

        let newInputs = inputs;

        if(!data.email.length) {
            newInputs[0].error = true;
            updateInputs(newInputs);
            return false;
        }

        dispatch(signIn(data));
        return true;
    }, []);

我需要捕捉點擊錯誤。 但是在單擊時，組件輸入不會更新。 我試圖將renderInputs添加到useEffect和狀態的useEffect ，但是我遇到了無限循環。

有人可以幫我什么正確的方法嗎？ :)

Answer 1

首先，renderInputs是多余的，因為映射返回一個數組：

const renderInputs = () => inputs.map((item, i) => <Input
       key={i} // index should also not be used as key
       type={item.type}
       label={item.label}
       name={item.name}
       error={item.error}
       onChange={inputOnChange}/>
);

您的onButtonClick使用useCallback和[]作為第二個參數。 因為它永遠不會更新，所以它將始終返回相同的值。 將inputs放在括號中或刪除useCallback，因為它無論如何都不會提高您的性能（實際上會更慢）。

您也不會更新輸入，因為您正在對輸入進行變異，而不是將它們更新為不可變的（ let newInputs = inputs;與以前相同，因此，您只是對輸入進行變異，並再次保存相同的對象，並且如果淺引用與以前相同）。

嘗試這個：

let newInputs = [...inputs];

if(!data.email.length) {
     newInputs[0].error = true;
     updateInputs(newInputs);
     return false;
 }

 dispatch(signIn(data));