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的做事态度非常陌生。

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

Answer 1

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

糟糕（通常）

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

这可以说是迭代过程中最常见的错误 React中的数组。除非有元素，否则这种方法可以正常工作在行数组中添加或删除。如果你正在迭代一些是静态的，那么这是完全有效的（例如一个数组导航菜单中的链接）。看看这个详细的对官方文件的解释。

Answer 2

使用constructor而非componentDidMount方法更新您的状态。

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

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

减少不删除正确的数组项

2 个答案: