减少而非移除正确的数组项

Question

编辑1

将代码缩短为

  removeContentNew(i) {
    var contents = this.state.templateContent;
    contents.splice(i, 1);
    this.setState({ templateContent: contents });
  }

可能与这个有关：

  componentDidMount() {
    this.setState({ templateContent: this.props.template.content });
  }

仍在屏幕上删除错误的内容。当我记录状态时，它确实给出了正确的数组。也许是地图有问题？

--

我正在尝试调试这段代码，但似乎找不到错误。

removeContent(i) {
 var $formgroup = false;
 const regex = new RegExp('^content.', 'i'),
       contents = _.reduce(_.keys(this.refs), (memo, k) => {
          if (regex.test(k) && k !== 'content.' + i) {
            var $formgroup = $(this.refs[k]);

            if (this.props.customer.getSetting('wysiwyg_enabled', true)) {
              var html = CKEDITOR.instances['html_' + i].getData();
            } else {
              var html = $formgroup.find('[name="html"]').val();
            }

            memo.push({
              subject: $formgroup.find('[name="subject"]').val(),
              html: html,
              text: $formgroup.find('[name="text"]').val(),
              language: $formgroup.find('[name="language"]').val()
            });

          }
          return memo;
        }, []);
this.setState({ templateContent: contents });
}

i是我想从数组templateContents中删除的项的ID。每次我按一个项目的remove按钮时，它似乎总是删除最后一个并忽略其他的。

我一直在测试变量k，它可能是问题的原因，但我不确定。

我真的很新 RegExp 的编程方式。

有什么想法可以解决这个问题吗？

- Joren Polfliet

---

@Raulucco 正则表达式已经过时 - 请查看编辑。我不知道为什么在这种情况下使用正则表达式... - Joren Polfliet

我认为你没有进入if语句，因为属性名称k不会有点字符。尝试检查k === 'content' && _.isObject(this.refs[k]) && ~_.isUndefined(this.refs[k][i])。 - Raulucco

@JorenPolfliet 删除数组的最后一个项目意味着splice()要么获取最后一个项目，要么获取-1。你说状态正确更新了，但是array.map没有？你在哪里使用array.map？请检查您发送到函数的参数i。 - Mamdouh Alsarayreh

@MamdohSaraireh，我给你举个简单的例子。数组是 [ 1,2,3 ]。当我删除了 2 并记录状态后，它会显示 [ 1,3 ]，但在屏幕上显示的却是 1 和 2，而我删除的是 2。我认为这可能与状态在开始时作为 props 有关。 - Joren Polfliet

@JorenPolfliet 我认为，不要在componentDidMount()方法中更新状态，而是在构造函数中更新。 - Raulucco

Answer 1

问题在于数组的映射。我将这里留下，因为它帮助我解决了我的问题。

糟糕的（通常）

<tbody>
    {rows.map((row, i) => {
        return <ObjectRow key={i} />;
    })}
</tbody>

这可能是在React中迭代数组时最常见的错误。除非从行数组中添加或删除元素，否则此方法将正常工作。如果您正在遍历静态内容，则这是完全有效的（例如导航菜单中的链接数组）。请查看官方文档中的详细说明。

- Joren Polfliet

Answer 2

在构造函数constructor中更新状态，而不是在componentDidMount方法内部进行。

constructor(pops) {
  super(props);
  this.state = {
    templateContent: this.props.template.content
  }
}

另外，调用setState也是异步的，因此在更改正在执行时您没有任何安全保障

- Raulucco