减少不删除正确的数组项

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。每次我按下其中一项的 删除 按钮时，它似乎总是删除最后一项并忽略其他项。

我一直在用 k 变量做一些测试，这可能是问题的原因，但我一点也不确定。

我对 RegExp 的处理方式真的很陌生。

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

Answer 1

问题出在数组的映射中。我会把它留在这里，因为它帮助我解决了我的问题。

Bad (Usually)

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

This is arguably the most common mistake seen when iterating over an array in React. This approach will work fine unless an element is added or removed from the rows array. If you are iterating through something that is static, then this is perfectly valid (e.g an array of links in your navigation menu). Take a look at this detailed explanation on the official documentation.

Answer 2

在 constructor 中而不是在 componentDidMount 方法中更新您的状态。

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

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

减少不删除正确的数组项

Reduce not removing correct array item

javascript

regex

arrays

underscore.js

reactjs