[英]React useMemo, useCallback resetting the state
I'm having a problem with my application.我的应用程序有问题。 We have an application which has multiple form input components (radio buttons, text inputs etc).
我们有一个具有多个表单输入组件(单选按钮、文本输入等)的应用程序。 We noticed that our forms are re-rendering multiple times when user interacting with these elements.
我们注意到,当用户与这些元素交互时,我们的表单会多次重新渲染。 We tried to use useMemo and useCallback hooks which it works very well with useReducers, but it has a problem when we are trying to use in setState.
我们尝试使用useMemo和useCallback钩子,它们与 useReducers 配合得很好,但是当我们尝试在 setState 中使用时它有问题。 It resetting the previous state values when user trying to enter values
当用户尝试输入值时,它会重置以前的状态值
const {useState, useCallback} = React;
const CustomInputBox = React.memo(({label, id, value, onChange}) => {
console.log(`${label} rendered`);
return (
<div className="custom-wrapper">
<label>{label}</label>
<input
type="text"
value={value}
onChange={event => onChange(id, event.target.value)}
/>
</div>
)
})
const CustomSelect = React.memo(({label, id, value, onChange}) => {
console.log(`${label} select rendered`);
return (
<div className="custom-wrapper">
<label>{label}</label>
<select name="cars" onChange={event => onChange(id, event.target.value)}>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
)
})
const FormApp = ({}) => {
const [state, setState] = useState({
name : '',
age: '',
car: ''
});
const updateForm = useCallback( (field, value) => {
setState({...state,
[field]: value
})
}, [])
return (
<div>
<CustomInputBox
label="Name"
id="name"
key="name"
value={state.name}
onChange={updateForm}
/>
<CustomInputBox
label="Age"
id="age"
key="age"
value={state.age}
onChange={updateForm}
/>
<CustomSelect
label="Car type"
id="car"
value={state.car}
onChange={updateForm}
/>
</div>
);
}
ReactDOM.render(
<div className="App">
<main>
<FormApp />
</main>
</div>,
document.getElementById('root')
);
You can actually remove the useCallback
on the updateForm
function.实际上,你可以删除
useCallback
上updateForm
功能。 Try尝试
const updateForm = (field, value) => setState({ ...state, [field]: value });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.