當我使用 Redux 作為 state 管理器時，我的組件沒有更新？

Question

這只是一個示例代碼，我試圖使用 Redux 來控制我的受控輸入，我將 Redux 添加到我的 React 項目中，並添加我的減速器和動作，但除了在我的一個動作中更新我的組件外，一切都運行良好。 以下代碼是我的減速器：

import actionTypes from "./actions";
const uniqid = require("uniqid");
const firstID = uniqid();
const initialState = {
  cons: [
    {
      value: "",
      id: firstID,
      added: false
    }
  ],
  pros: [
    {
      value: "",
      id: firstID,
      added: false
    }
  ],
  num: 0
};
const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case actionTypes.HANDLEINPUTCHANGE:
      // const newState = state;
      const changingItem = newState[action.case].find(item => {
        return item.id === action.id;
      });
      const changingItemIndex = newState[action.case].findIndex(item => {
        return item.id === action.id;
      });
      changingItem.value = action.event;
      if (
        changingItemIndex === newState[action.case].length - 1 &&
        !changingItem.added
      ) {
        alert(123);
        const newItem = {
          id: uniqid(),
          value: "",
          added: false
        };
        newState[action.case].push(newItem);
        changingItem.added = true;
        console.log(newState);
      }
      newState[action.case][changingItemIndex] = changingItem;
      return newState;
    case actionTypes.CLICK:
      newState.num += 1;
      return {
        ...newState
      };
    default:
      return state;
  }
};
export default reducer;

以下代碼是我的組件，不幸的是，HANDLEINPUTCHANGE 操作類型沒有更新我的組件：

import React, { Component } from "react";
import FormElement from "../../base/components/formElement/FormElement";
import actionTypes from "../../base/store/actions";
import { connect } from "react-redux";
import "./style.scss";
class FormGenerator extends Component {
  render() {
    console.log(this.props);
    return (
      <ul className="row formGeneratorContainer fdiColumn">
        <li onClick={this.props.click}>{this.props.num}</li>
        {this.props[this.props.case].map((item, index) => {
          return (
            <li className="row formGeneratorItem" key={index}>
              <div className="bullet d_flex jcCenter aiCenter">1</div>
              {/* <FormElement onChange={(e,index,type,)}/> */}
              <input
                name={item.id}
                type="text"
                onChange={event =>
                  this.props.onFieldValueChange(
                    event.target.value,
                    index,
                    this.props.case,
                    item.id
                  )
                }
              />
            </li>
          );
        })}
      </ul>
    );
  }
}

const mapStateToProps = state => {
  return {
    cons: state.cons,
    pros: state.pros,
    num: state.num
  };
};
const mapDispachToProps = dispatch => {
  return {
    onFieldValueChange: (event, index, c, id) =>
      dispatch({
        event: event,
        index: index,
        case: c,
        id: id,
        type: actionTypes.HANDLEINPUTCHANGE
      }),
    click: () => dispatch({ type: actionTypes.CLICK })
  };
};
export default connect(
  mapStateToProps,
  mapDispachToProps
)(FormGenerator);

Answer 1

您需要設置受控組件的value ：

<input
    name={item.id}
    type="text"
    value={item.value}
    onChange={event =>
        this.props.onFieldValueChange(
            event.target.value,
            index,
            this.props.case,
            item.id
        )
    }
/>

其他問題在您的減速器中，您正在使用以下幾行更改 redux state：

newState[action.case].push(newItem);
// ...
newState[action.case][changingItemIndex] = changingItem;

查看 redux 文檔中的這些部分：

• 在 Arrays 中插入和移除項目
• 更新數組中的項目