为什么我不能使用 redux 从 Reactjs 中的数组中删除元素答案

【问题标题】：Why cant I remove element from array in Reactjs with redux为什么我不能使用 redux 从 Reactjs 中的数组中删除元素
【发布时间】：2021-01-28 00:45:25
【问题描述】：

我通过将

元素添加到数组中来动态地将它们添加到组件中。这不是问题并且效果很好。我在这里要解决的问题是通过传递

的 id 在双击时删除

，该 id 在调度减速器时用道具双击。

主要问题是数组过滤功能仅在我想在发送 delDiv 减速器时传递 e.target.id 的 id 时在 div 和过滤函数中对 div id 进行硬编码时才有效.

注意：我可以通过像这样更改 addDivReducer 来成功删除 div：

case "ADD_DIV":
  return state.concat(
        <DivComponent 
          key={Math.floor(Math.random() * 100) + 1} 
          id={11} ***************************************************** Changed
         />
  );

case "DELETE_DIV":
  state = state.filter((elements) => {
    return elements.props.id !== 11; *********************************** Changed
  });
  return state;

但预期的效果是在调度时将 id 作为道具传递，如下面的代码所示

添加删除元素的 reducer 如下所示：

import DivComponent from "../../components/AddDivComponent";

const addDivReducer = (state, action) => {
  switch (action.type) {

    case "ADD_DIV":
      return state.concat(
        <DivComponent 
          key={Math.floor(Math.random() * 100) + 1} 
          id={Math.floor(Math.random() * 100) + 1} 
         />
      );

    case "DELETE_DIV":
      state = state.filter((elements) => {
        return elements.props.id !== action.payload;
      });
      return state;

    default:
      return (state = []);
  }
};

export default addClipartReducer;

index.js 的动作如下：

export const addDiv = (props) => {
  return {
    type: "ADD_DIV",
    payload: props,
  };
};

export const deleteDiv = (props) => {
  return {
    type: "DELETE_DIV",
    payload: props,
  };
};

当在 AddDivComponent.js 中双击 div 时，正在调度删除减速器：

import { useDispatch } from "react-redux";
import { deleteDiv } from "../../store/actions";

const AddDivComponent = (props) => {

  const dispatch = useDispatch();

  const removeClipart = (e) => {
    dispatch(deleteDiv(e.target.id));
  };

    return(
      <div
        id={props.id}
        className="my-div"
        onDoubleClick={removeDiv}
      />
     
    );
};

export default DivComponent;

元素数组终于在 Canvas.js 中显示：

import { useSelector } from "react-redux";

const Canvas = () => {

  const divList = useSelector((state) => state.addDIV);
  
  return(
    <div className="canvas">
      {divList}
    </div>
  );
};

export default Canvas;

【问题讨论】：

不要在状态下存储组件，这不好。将其属性存储在 { key, id } 之类的对象中，并在您的组件渲染时使用它们
@buzatto 为什么不呢？就这样我知道。另外我主要关心为什么 array.filter 不能工作，除非我在 div 和 filter 函数中硬编码一个 id，
我开始怀疑是不是类型错误。

标签： arrays reactjs redux

【解决方案1】：

你正在改变你的 DELETE_DIV 减速器的状态。如果需要处理状态，请先创建一个副本：

  // mutating state here to a new value, can lead to problems
  state = state.filter((elements) => {
    return elements.props.id !== action.payload;
  });

我建议直接返回过滤器，因为过滤器已经返回所需的下一个状态，而不是改变原来的状态：

case "DELETE_DIV":
  return state.filter((elements) => {
    return elements.props.id !== action.payload;
  });

【讨论】：