React Redux同步Action返回Proxy对象而非字符串问题求助

嘿，这问题我熟！你之所以拿到Proxy对象而非预期的字符串，核心原因是错误处理了React输入框的onChange事件参数。

问题出在哪？ #

看你写的输入框代码：

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

你把onChange回调的参数命名为text，但实际上React的输入框onChange回调接收的是一个React合成事件对象（SyntheticEvent），在开发环境下这个事件对象会以Proxy的形式存在，而不是直接的输入文本内容。这就是你console.log(text)时看到Proxy的原因！

怎么修复？ #

只需要从事件对象里取出输入框的实际值，再传给action即可：

1. 修改输入框的onChange回调：

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

这里event.target指向当前的input DOM元素，event.target.value就是用户输入的字符串内容。

2. 验证你的Action和Reducer
   你的onChangeAnswer Action和Reducer逻辑本身是没问题的：

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

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

只要传入的text是正确的字符串，Reducer就能正常更新currentAnswer状态，你再打印text就能看到预期的输入内容啦。

内容的提问来源于stack exchange，提问作者Alexander Kireyev