【问题标题】:React useMemo, useCallback resetting the stateReact useMemo,useCallback 重置状态
【发布时间】:2020-11-10 09:01:14
【问题描述】:

我的申请有问题。我们有一个应用程序,它有多个表单输入组件(单选按钮、文本输入等)。我们注意到,当用户与这些元素交互时,我们的表单会多次重新渲染。我们尝试使用 useMemouseCallback 钩子,它们与 useReducers 配合得很好,但是当我们尝试在 setState 中使用时它会出现问题。当用户尝试输入值时,它会重置以前的状态值

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')
);

【问题讨论】:

    标签: reactjs react-hooks


    【解决方案1】:

    您实际上可以删除updateForm 函数上的useCallback。 试试

    const updateForm = (field, value) => setState({ ...state, [field]: value });
    

    【讨论】:

    • 我试过删除useCallback,但这会导致到处重新渲染,
    • 如果不想重新渲染,可以试试useRef hooks。在onChange 事件上设置参考值。