Отправка event.target.value в качестве параметра отправляемому действию

Question

Я пытаюсь обновить значение «searchField» моего магазина (оно начинается с пустой строки), когда пользователь вводит значение в текстовое поле компонента free-response. Когда я набираю в поле, свойство searchField становится неопределенным, и я боюсь, что это фундаментальная ошибка, которую я не вижу (я все еще новичок в Redux.) Я включил мой редуктор, компонент и соответствующий код действия ниже , Любая помощь приветствуется!

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

И на вашем редукторе вы просто нужно обновить магазин со значениями из полезной нагрузки (ниже могут отличаться в зависимости от фактической структуры вашего магазина):

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