正在将event.target.value作为参数发送到调度的操作

Question

当用户在免费响应组件的文本框中输入值时，我正在尝试更新我的商店的"searchField"值(它以空白字符串开头(。当我在字段中键入时，"searchField"属性将变为未定义，我担心这是一个我看不到的基本错误(我对Redux还很陌生。(我在下面包含了我的reducer、组件和相关操作代码。非常感谢您的帮助！

free-response.component.jsx:

export const FreeResponse = ({searchField,changeSearchField,i}) =>{
let questionURL="/images/question";
return(
<div className="main">
<img src={`${questionURL}${i}.png`}/>
<form >
<input type="text" onChange={changeSearchField} value={changeSearchField} alt="text field"/>
</form>
</div>
)}
const mapStateToProps=state=>({
searchField: state.question.searchField,
i:state.question.i
})
const mapDispatchToProps=dispatch=>({
changeSearchField: (e)=>dispatch(changeSearchField(e.target.value))
})
export default connect(mapStateToProps,mapDispatchToProps)(FreeResponse);

question.reducer.js:

return{
...state,
searchField:changeSearchField(e)
};

question.utils.js(动作创建者(:

export const changeSearchField=(e)=> e;

question.actions.js:

export const changeSearchField=()=>({
type:QuestionActionTypes.CHANGE_SEARCHFIELD,
})

Answer 1

您似乎没有为changeSearchField操作定义有效负载。这是为了确保表单输入中的值将由操作创建者传递。

这是一种方法：

export const changeSearchField = (searchField) => ({
type: QuestionActionTypes.CHANGE_SEARCHFIELD,
payload: searchField
});

在您的reducer上，您只需要使用有效负载中的值更新存储(以下内容可能因存储的实际结构而异(：

return {
...state,
searchField: action.payload.searchField,
};