React Redux sync action returns some Proxy object instead of string

问题

I have an input with currentAnswer:

    <input
      value={props.currentAnswer}
      onChange={(text) => dispatch(onChangeAnswer(text))}
    />

Which calls function onChangeAnswer:

export function onChangeAnswer(text) {
  console.log(text);
  return { type: ON_CHANGE_ANSWER, data: text };
}

Reducer:

export default function reduce(state = initialState, action) {
  switch (action.type) {
  case ON_CHANGE_ANSWER:
    return assign({}, state, {
      currentAnswer: action.data
    });

Async actions works good, but when I change text in the input I see next object in console:

{type: "ON_CHANGE_ANSWER", data: Proxy}
  data: Proxy {dispatchConfig: null, _targetInst: null, …}
  type: "ON_CHANGE_ANSWER"

So, I want data will be entered in field text.

Should I dispatch it somehow? I obviously have a lack of understanding how all this works.

回答1:

The proxy you are getting is React SyntheticEvent which makes event behave the same across browsers. You need to access the value from target which is original HTML Element:

<input
  value={props.currentAnswer}
  onChange={(event) => dispatch(onChangeAnswer(event.target.value))}
/>

Btw - events get nullified for performance reasons - so you can't actually pass event do redux.

回答2:

the input's onChange is returning an event. What you want to do is change the line

onChange={(text) => dispatch(onChangeAnswer(text))}

to this:

onChange={(text) => dispatch(onChangeAnswer(text.target.value))}

to get the value you've entered into the input.

来源：https://stackoverflow.com/questions/49944105/react-redux-sync-action-returns-some-proxy-object-instead-of-string

标签

reactjs

redux

react-redux

redux-thunk