未捕获的类型错误：无法读取未定义的属性(读取"目标")，

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

首先，您不需要核心ReactuseState钩子，因为您使用的是React Redux。这实际上是在您的组件本地创建第二个状态。相反，使用您配置的集中式Redux存储和React Redux挂钩。只要您将应用程序封装在上下文提供程序中并将存储传递给它，就可以使用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处理程序中显式传递事件。即onChange = {handleInputChange}与onChange = {(e) => handleInputChange(e)}