Reactjs 在更改道具上反应更新组件

嗨，我正在使用React钩子，我构建了如下登录组件：

    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;
    }, []);

const[inputs，updateInputs]=useState(
[
{
键入：“电子邮件”，
标签：“电子邮件”，
名称：'电子邮件'，
值：“”，
错误：false
},
{
键入：“密码”，
标签：“密码”，
名称：“密码”，
值：“”，
错误：false
}
]
);
常量renderInputs=（）=>{
const inputsArr:typeof Input=[]；
输入。映射（（项目，i）=>{
输入推力(
);
});
返回输入；
};
const onButtonClick=useCallback（（）=>{
常数数据={
电子邮件：输入[0]。值，
密码：输入[1]。值
}
让newInputs=输入；
如果（！data.email.length）{
新输入[0]。错误=true；
更新输入（新输入）；
返回false；
}
调度（签名（数据））；
返回true；
}, []);

我需要在单击时捕捉错误。但单击组件输入不会更新。我尝试将

renderInputs

添加到

useffect

和renderInputs-like状态，但在那里我得到了无限循环

---

有人能帮我吗请告诉我正确的方法是什么

首先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}/>
);

let newInputs = [...inputs];

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

 dispatch(signIn(data));