Question

我的应用程序有问题。我们有一个具有多个表单输入组件（单选按钮，文本输入等）的应用程序。我们注意到，当用户与这些元素进行交互时，我们的表单将多次重新呈现。我们尝试使用 useMemo 和 useCallback 钩子，它们与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')
);

Answer 1

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

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

反应useMemo，useCallback重置状态

1 个答案: