Javascript React-Redux。映射函数有时会复制数组

我在组件中有一个.map函数：

let recentItemsMarkup = loading ? (
      <p>Items are loading...</p>
    ) : (
      items.map(item => (
        <ShoppingItem
          key={item._id}
          id={item._id}
          name={item.name}
          createdAt={item.date}
        />
      ))
    );

class ShoppingItem extends Component {


  render() {
    const { authenticated } = this.props.user;
    const { name, createdAt, classes, id } = this.props;
    const deleteButton = authenticated ? (
      <DeleteItem id={id} />
    ) : null;
    return (
      <Card className={classes.card}>
        <CardContent>
          <Typography variant="body1" color="textPrimary">
            {this.props.id}
          </Typography>
          <Typography variant="body1" color="textPrimary">
            {name}
          </Typography>
          {deleteButton}
          <Typography color="textSecondary">
            {dayjs(createdAt).format("h:mm a, MMM DD YYYY")}
          </Typography>
        </CardContent>
      </Card>
    );
  }
}

ShoppingItem.propTypes = {
  name: PropTypes.string.isRequired,
};

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

const actionsToProps = {
  deleteItem
};

export default connect(
  mapStateToProps,
  actionsToProps
)(withStyles(styles)(ShoppingItem));

和减速器：

const initialState = {
  items: [],
  item: {},
  loading: false
};

export default (state = initialState, action) => {
  switch (action.type) {
    case LOADING_ITEMS:
      return {
        ...state,
        loading: true
      };
    case GET_ITEMS:
      return {
        ...state,
        items: action.payload,
        loading: false
      };
    case POST_ITEM:
      return {
        ...state,
        items: [action.payload, ...state.items]
      };

    case DELETE_ITEM:
      return {
        ...state,
        items: state.items.filter(item => item._id !== action.payload)
      };
    default:
      return state;
  }
};

我检查了ID和数据库，一切正常，ID是唯一的，为什么会发生这种情况

以及购物项目组件：

let recentItemsMarkup = loading ? (
      <p>Items are loading...</p>
    ) : (
      items.map(item => (
        <ShoppingItem
          key={item._id}
          id={item._id}
          name={item.name}
          createdAt={item.date}
        />
      ))
    );

class ShoppingItem extends Component {


  render() {
    const { authenticated } = this.props.user;
    const { name, createdAt, classes, id } = this.props;
    const deleteButton = authenticated ? (
      <DeleteItem id={id} />
    ) : null;
    return (
      <Card className={classes.card}>
        <CardContent>
          <Typography variant="body1" color="textPrimary">
            {this.props.id}
          </Typography>
          <Typography variant="body1" color="textPrimary">
            {name}
          </Typography>
          {deleteButton}
          <Typography color="textSecondary">
            {dayjs(createdAt).format("h:mm a, MMM DD YYYY")}
          </Typography>
        </CardContent>
      </Card>
    );
  }
}

ShoppingItem.propTypes = {
  name: PropTypes.string.isRequired,
};

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

const actionsToProps = {
  deleteItem
};

export default connect(
  mapStateToProps,
  actionsToProps
)(withStyles(styles)(ShoppingItem));

class ShoppingItem扩展组件{
render（）{
const{authenticated}=this.props.user；
const{name，createdAt，classes，id}=this.props；
const deleteButton=已验证(
)：null；
返回(
{this.props.id}
{name}
{deleteButton}
{dayjs（createdAt）.format（“h:mma，mmmdyyyy”）}
);
}
}
ShoppingItem.propTypes={
名称：PropTypes.string.isRequired，
};
常量mapStateToProps=状态=>({
用户：state.user
});
常量actionsToProps={
删除项
};
导出默认连接(
MapStateTops，
动作停止
)（带款式（款式）（购物项目））；

您的后端似乎与新项目一起返回一个项目数组，因此在这种情况下，您只需将它们设置为状态，而不是添加到现有项目：

case POST_ITEM:
      return {
        ...state,
        items: action.payload
      };

是因为

病例后检查项目： 返回{ ……国家， items:[操作.有效负载，…状态.items] };

只需发送需要添加的项目，然后在后端处理插入操作。

好的，我解决了问题，

---

我的失败是，我将“getItems”添加到“postItem”函数中，这会导致重复，因为当我发布一个项目时，它已经刷新页面并从componentDidMount方法加载项目。因此，我似乎没有很好地理解其中的逻辑，即当状态或道具发生变化时，页面会自动刷新。

尝试在每次发布项目时发送

获取项目

，并显示发生的情况！它已经在代码中这样做了：

handleSubmit=event=>{event.preventDefault（）；const newItem={name:this.state.name，handler:this.props.user.user.name}；this.props.positem（newItem）；this.props.getItems（）；}我尝试了许多版本，包括您，但仍然偶尔出现错误。我不明白它的逻辑，只是有时候它是如何工作的。因为如果id是唯一的，db是可以的，它有时如何在视图上复制？它似乎以某种方式同时推送新项目和所有项目（包括新项目）