React/Redux中单选按钮Checked属性失效问题求助

问题根源分析 #

你的代码存在以下几个关键问题，导致单选按钮选中状态无法正常工作：

• 未将Redux状态映射到组件props，组件无法获取appearClean的最新值
• 第二个单选按钮未配置checked属性判断逻辑
• 组件未通过connect函数与Redux Store关联
• Redux代码缺少处理action的reducer，状态无法更新
• mapDispatchToProps存在未定义的冗余代码

修复后的代码实现 #

1. FFCleaning.js 修正 #

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { handleAppearClean } from './redux.js';

class FFCleaning extends Component {
  onNextClickHandler = () => {
    this.props.history.push('/ff-report/FFRepairs');
  };

  render() {
    const { handleAppearClean, appearClean } = this.props;

    return (
      <div>
        <h2 style={{ textDecoration: "underline" }}>Cleaning</h2>

        <label>Does this property appear to be clean?</label>
        <div>
          <input
            type="radio"
            id="appear_clean_yes"
            name="appear_clean"
            value="Y"
            onChange={handleAppearClean}
            checked={appearClean === 'Y'}
          />
          <label htmlFor="appear_clean_yes">Yes</label>

          <input
            type="radio"
            id="appear_clean_no"
            name="appear_clean"
            value="N"
            onChange={handleAppearClean}
            checked={appearClean === 'N'}
          />
          <label htmlFor="appear_clean_no">No</label>
        </div>
      </div>
    );
  }
}

FFCleaning.propTypes = {
  handleAppearClean: PropTypes.func.isRequired,
  appearClean: PropTypes.string.isRequired,
  history: PropTypes.object.isRequired,
};

// 将Redux状态映射到组件props
const mapStateToProps = (state) => ({
  appearClean: state.selectedFFAppointment.appearClean
});

// 绑定action creator到dispatch
const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    { handleAppearClean },
    dispatch
  );

// 连接组件与Redux Store
export default connect(mapStateToProps, mapDispatchToProps)(FFCleaning);

2. Redux.js 补充reducer #

const actions = {
  APPEAR_CLEAN_FLAG: 'SELECTEDFFAPPOINTMENT/APPEAR_CLEAN_FLAG',
};

const initialState = {
  appearClean: '',
};

// 新增reducer处理状态更新
const selectedFFAppointmentReducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.APPEAR_CLEAN_FLAG:
      return {
        ...state,
        appearClean: action.appearClean,
      };
    default:
      return state;
  }
};

const setAppearClean = (appearClean) => ({
  type: actions.APPEAR_CLEAN_FLAG,
  appearClean,
});

const handleAppearClean = (event) => (dispatch) => {
  const { value } = event.target;
  dispatch(setAppearClean(value));
};

export {
  actions,
  handleAppearClean,
  selectedFFAppointmentReducer,
};

3. Store配置（补充说明） #

在创建Redux Store时，需要合并reducer并添加thunk中间件（处理异步action）：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { selectedFFAppointmentReducer } from './redux.js';

const rootReducer = combineReducers({
  selectedFFAppointment: selectedFFAppointmentReducer,
});

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

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