Question

我具有此功能，可以在单击“查看更多”或“查看更少”时显示或隐藏复选框选项。有人告诉我这改变了redux状态

const getVisibleBrandOptions = (options = [], page) => {
  let length = 0;
  let visibleLength = 0;
  options.map((opt) => {
    if (length > page * OPTIONS_PER_PAGE) {
      opt.hidden = true;
    }
    if (length <= page * OPTIONS_PER_PAGE) {
      opt.hidden = false;
      visibleLength++;
    }
    length++;
    return opt;
  });
  options.loadMoreLabel = visibleLength >= page * OPTIONS_PER_PAGE ? "See more" : "See less";
  return options;
};

因此，我通过使用传播运算符并设置了const option = { ... opt };对此进行了修改，但问题在于它几乎只返回了原始对象，而没有进行修改。 option.hidden

const getVisibleBrandOptions = (options = [], page) => {
  let length = 0;
  let visibleLength = 0;
  options.map((opt) => {
    const option = { ...opt };
    if (length > page * OPTIONS_PER_PAGE) {
      option.hidden = true;
    }
    if (length <= page * OPTIONS_PER_PAGE) {
      option.hidden = false;
      visibleLength++;
    }
    length++;
    return option;
  });
  options.loadMoreLabel = visibleLength >= page * OPTIONS_PER_PAGE ? "See more" : "See less";
  return options;
};

Answer 1

您在数组上设置options.loadMoreLabel真的很奇怪，但是除此之外，您对地图返回的数组没有做任何事情。检查下面的代码，它应该可以工作

const getVisibleBrandOptions = (options = [], page) => {
      let length = 0;
      let visibleLength = 0;
      const opts = options.map(opt => {
        const option = { ...opt };
        if (length > page * OPTIONS_PER_PAGE) {
          option.hidden = true;
        }
        if (length <= page * OPTIONS_PER_PAGE) {
          option.hidden = false;
          visibleLength++;
        }
        length++;
        return option;
      });
      opts.loadMoreLabel = visibleLength >= page * OPTIONS_PER_PAGE ? 'See more' : 'See less';
      return opts;
    };

Answer 2

Array.prototype.map()返回原始数组的映射副本，您将在此处忽略它。您实际上并没有完全改变要返回的options对象。您可以简单地将.map(...)替换为.forEach(...)以对原始数组进行操作，也可以按照不可变的方式进行操作：

const getVisibleBrandOptions = (options = [], page) => {
  const limit = page * OPTIONS_PER_PAGE;
  const newOptions = options.map((opt, index) => ({
    ...opt,
    hidden: index > limit;
  }));

  newOptions.loadMoreLabel = options.length > limit ? "See more" : "See less";
  return newOptions;
}

此外，您似乎正在将命名属性loadMoreLabel放在数组上，我认为这不是您想做的！更不用说它永远不会是true。

在.map中使用Spread运算符不改变状态，而是从函数返回更新后的状态

2 个答案: