React-Redux状态异常：dispatch后状态无法维持的问题求助

我帮你梳理下导致状态异常的核心原因，以及对应的修复步骤：

核心问题点 #

1. 状态结构完全不匹配：你的Reducer初始状态定义为数组state = []，但创建store时传入的是对象{myNewName:"enter your name"}，而且组件期望从props中获取单个myNewName字符串——数组结构根本无法满足这个需求，这是导致this.props.myNewName变成undefined的根本原因。
2. Reducer更新逻辑错误：在处理CHANGE_NAME动作时，你返回的是[...state, { myNewName: action.myNewName }]，这会不断往数组里追加新对象，而不是替换现有的名字值。数组本身没有myNewName属性，所以mapStateToProps自然取不到值。
3. 组件错误引用状态：代码里写了{this.state ? this.state.myNewName: this.props.myNewName}，但你的组件并没有初始化自身状态this.state，而且Redux管理的状态应该从this.props获取，完全不需要用到组件自身的state。

分步修复代码 #

1. 修正Reducer（reducers/MyNameReducer.js） #

把状态结构改成对象，更新时正确替换myNewName的值：

const MyName = (state = { myNewName: "enter your name" }, action) => {
  console.log("REDUCER - action.myNewName: " + action.myNewName);
  console.log("REDUCER - state.myNewName: " + state.myNewName);
  
  switch (action.type) {
    case 'CHANGE_NAME':
      // 使用对象展开运算符保留原有状态属性，只更新myNewName
      return { ...state, myNewName: action.myNewName };
    default:
      return state;
  }
};

export default MyName;

2. 修正组件（components/MyNameComponent.js） #

移除错误的this.state引用，直接从props获取Redux状态：

import React from 'react';
import { connect } from 'react-redux';
import { changeName } from '../actions/MyNameActions';

class MyName extends React.Component {
  render() {
    let input;
    console.log("Component render - props:", this.props);
    
    return(
      <div>
        <form onSubmit={e => {
          e.preventDefault();
          if (!input.value.trim()) {
            return;
          }
          this.props.changeName(input.value);
          input.value = '';
        }}>
          <input ref={node => input = node} />
          <button type="submit"> Change Name </button>
        </form>
        Hi there, {this.props.myNewName}.
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return { changeName: myNewName => dispatch(changeName(myNewName)) };
};

const mapStateToProps = (state) => {
  return { myNewName: state.myNewName };
};

export default connect(mapStateToProps, mapDispatchToProps)(MyName);

3. 简化index.js的初始状态配置 #

因为Reducer已经定义了默认初始状态，createStore可以省略第二个参数（保持逻辑一致）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MyName from './reducers/MyNameReducer';

// Redux会自动使用Reducer的默认初始状态
const store = createStore(MyName);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);

修复后的效果 #

点击按钮提交输入内容后，Reducer会正确更新状态对象的myNewName属性，mapStateToProps会把最新的名字映射到组件props，页面的提示文字会同步更新为你输入的内容。

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