正在从ReactJS数组中删除Stateful元素

Deleting Stateful element from ReactJS array

本文关键字：删除 Stateful 元素 数组 ReactJS      更新时间：2023-11-17

我在移除React数组中的有状态元素时遇到问题。在下面的例子中，如果你点击第二个元素（"B"）上的"切换"，你会看到：

条目id:0名称：A处于活动状态切换删除

条目id:1名称：B不活动切换删除

条目id:2名称：C处于活动状态切换删除

如果您现在点击第一个元素（'A'）上的"删除"：

条目id:0名称：B处于活动状态切换删除

条目id:1名称：C不活动切换删除

B已经改变了，但我只想删除A，而不影响任何其他元素。根据文档，我有一个key，并尝试使用带字符串前缀的键，但没有帮助。

有没有什么方法可以在不将状态推到TestContainer的情况下做到这一点？（在我的真实情况下，我有很多不同的元素，有不同类型的状态）。

<div id="test"></div>
<script type="text/jsx">
  var TestLine = React.createClass({
      getInitialState: function() {
          return {active: true};
      },
      handleLineRemove: function(e) {
        this.props.processLineRemove(this.props.id);
      },
      toggleActive: function(e) {
        this.setState({active: !this.state.active};
      },
      render: function() {
        return (
          <p>
            Entry id: {this.props.id} name: {this.props.name}
            {this.state.active ? " Is Active " : " Is Not Active " }
            <a onClick={this.toggleActive}>Toggle</a>
            &nbsp;<a onClick={this.handleLineRemove}>Remove</a>
          </p>
        );
      }
    });
     var TestContainer = React.createClass({
        getInitialState: function() {
          return {data: {lines: ['A','B','C']}};
        },
        processLineRemove: function(index) {
              var new_lines = this.state.data.lines.slice(0);
              new_lines.splice(index,1);
              var newState = React.addons.update(this.state.data, {
                lines: {$set: new_lines}
              });
          this.setState({data: newState});
        },
        render: function() {
            var body =[];
            for (var i = 0; i < this.state.data.lines.length; i++) {
                body.push(<TestLine 
                          key={i}
                          id={i}
                          name={this.state.data.lines[i]}
                          processLineRemove={this.processLineRemove} />)
            }
            return (
                <div>{body}</div>
            );
        }
    });
React.render(<TestContainer />, document.getElementById('test'));
</script>

当您有一个包含任意删除/插入的列表时，不能将索引用作键。在这种情况下，您可以使用实际值，因为它没有更改。

var body = this.state.data.map(function(x, i){
    return <TestLine 
        key={x}
        name={x}
        processLineRemove={this.processLineRemove.bind(null, i)} />
}.bind(this));

在更复杂的情况下，您需要一个对象数组，并为每个对象指定一个具有唯一值的特性。假设状态为[makeItem('A'), makeItem('B'), ...]:

function unique(){ return ++unique.i };
unique.i = 0;
function makeItem(text){ return {text: text, id: unique()}; };
var body = this.state.data.map(function(x, i){
    return <TestLine 
        key={x.id}
        name={x.text}
        processLineRemove={this.processLineRemove.bind(null, i)} />
}.bind(this));

如果你有一个项目列表，并且你知道项目将被随机编辑，我不会创建这样的键。我宁愿创建唯一的密钥，并在列表更改时使用其他密钥创建will not overlap。像这样一个简单的随机密钥生成器就足够了。

为什么？让我们复习每一步。

第一次渲染看起来像这个

条目id:0名称：A处于活动状态切换删除

条目id:1名称：B不活动切换删除

条目id:2名称：C处于活动状态切换删除

第二个看起来像

条目id:0名称：B不活动切换删除

条目id:1名称：C处于活动状态切换删除

现在是React抓住这两个机会，弄清楚发生了什么变化的时候了。它将比较组件和键。

它查看第一个元素，并了解到"active"标志是根据键设置为true的。因此，它将对在第二次渲染中找到的关键点0应用相同的方法。对于其余元素，以此类推。

因此，如果您的密钥在更改时没有重叠，则可以避免此问题。这是AFAIK的唯一途径。希望这能有所帮助。

这里有一个演示来解释以上内容。

由提供

相关文章：