Uncaught TypeError: Cannot read properties of undefined (reading 'target'),

Question

我的问题是如何访问 'handleInputChange'，因为我无法在 useEffect 挂钩之外编写 'handleInputChange' 函数，因为它正在执行副作用。如果有人能帮助我解决这个问题，我会很高兴。

1.  const [values, setValue] = useState({});
    const dispatch = useDispatch();

   let handleInputChange
    useEffect(()=>{
        handleInputChange = (e) =>{
        setValue(
            {
                values: { ...values, [e.target.name]: e.target.value }
            }, 
            () => {
            dispatch({
            type: "SET_FORMVALUES",
            payload: values
            })
        }
    )}
    handleInputChange();
    },[dispatch])

<TextField id="outlined-basic" label="First Name" variant="outlined"
                        name="firstName"
                        className='app__input'
                        placeholder='First Name'
                        type="text"
                        value={values['firstName']}
                        onChange = {handleInputChange} />

//Reducer.js

const initialState = {
  formValues: {},
  message: ""
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_FORMVALUES":
      console.log("--- Changing form data ---");
      return {
        ...state,
        formValues: action.payload
      };
    case "SUBMIT_FORM":
      return {
        ...state,
        message: "Form submitted!!"
      };
    default:
      return state;
  }
};

Answer 1

首先，您不需要核心 React useState 挂钩，因为您使用的是 React Redux。这实际上是在您的组件本地创建第二个状态。相反，使用您配置的集中式 Redux 存储和 React-Redux 挂钩。只要你有 wrapped your app in a context provider 并将你的商店传递给它，你就可以使用 useDispatch 更新状态和 useSelector 检索状态并订阅更改。

其次，您不需要 useEffect，因为您只是在更新状态。

这是一个例子：

import { useDispatch, useSelector } from 'react-redux';

export default function App() {
    const formValues = useSelector((state) => state.formValues);
    const dispatch = useDispatch();

    const handleInputChange = (name, value) => {
        dispatch(
            {
                type: "SET_FORMVALUES", 
                payload: {
                    ...formValues,
                    [name]: value
                }
            }
        );
    }

    return (
        <div className="App">
            <input type="text" name="FirstName" onChange={ (e) => handleInputChange(e.target.name, e.target.value)} />
            <span>{formValues["FirstName"]}</ span>
            <input type="text" name="LastName" onChange={ (e) => handleInputChange(e.target.name, e.target.value)} />
            <span>{formValues["LastName"]}</ span>
        </div>
    );
}

其中大部分可能与问题标题中的错误没有直接关系，但简化代码应该可以帮助您更轻松地进行调试。该错误可能只是因为您没有在 onChange 处理程序中显式传递事件。 IE。 onChange = {handleInputChange} 对比 onChange = {(e) => handleInputChange(e)}