Question

试图通过操作获得用户输入，一切正常，我得到了console.log关于inputVal如何变化的日志，但是当我尝试在

中打印此内容时，我在console中未定义< p>

我应该使用mapDispatchToProps之类的东西还是不需要它，因为我要将动作作为第二个参数传递给mapStateToProps


export const inputChange = val => {
  return {
    type: INPUT_CHANGE,
    payload: val
  };
};


import { INPUT_CHANGE } from './actionTypes';

const initialState = {
  inputVal: ''
};

export default (state = initialState, action) => {
  switch (action.type) {
    case INPUT_CHANGE:
      return {
        ...state,
        inputVal: action.payload
      };
    default:
      return state;
  }
};

const mapStateToProps = state => {
  console.log(state);

  return state;
};

class MainPage extends Component {

  onInput = e => {
    this.props.inputChange(e.target.value);
    console.log(this.props.inputChange(e.target.value));
  };

  render() {
    console.log(this.props.inputVal);
    return (
      <div>
         <input onChange={this.onInput}></input>
        <p>{this.props.}</p>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  {
    addToCart,
    removeFromCart,
    selectItem,
    inputChange
  }
)(MainPage);



import { combineReducers } from 'redux';
import AddItem from './addItem/reducer';
import InputReducer from './reducerInput';

export default combineReducers({
  AddItem,
  InputReducer
});

我已经尝试过this.props.inputVal

Answer 1

由于具有CombineReducers，因此应使用这些键在mapStateToProps中进行访问。

来自redux文档：

combinedReducers（）产生的状态将每个状态的名称空间命名为   传递给CombineReducers（）的键下的reducer

您可以通过使用不同的键来控制状态键名称   传递对象中的reducers。例如，您可以致电   CombineReducers（{todos：myTodosReducer，counter：myCounterReducer}）   状态形状为{todos，counter}。

因此您的mapStateToProps必须类似于：

const mapStateToProps = state => {
  console.log(state);

  return {
     inputVal: state.InputReducer.inputVal
  }
};

最小工作代码沙箱：

https://codesandbox.io/s/cold-meadow-pxtu3

我试图通过redux获取输入，一切都很好，但是我不知道如何获取输入值

1 个答案: