javascript - 从 ReactJS 数组中删除 Stateful 元素

Question

我在删除 React 数组中的有状态元素时遇到问题。在以下示例中，如果单击第二个元素(“B”)上的“切换”，您将看到:

Entry id: 0 name: A Is Active Toggle Remove

Entry id: 1 name: B Is Not Active Toggle Remove

Entry id: 2 name: C Is Active Toggle Remove

如果您现在单击第一个元素(“A”)上的“删除”:

Entry id: 0 name: B Is Active Toggle Remove

Entry id: 1 name: C Is Not Active Toggle Remove

B 已更改，但我只想删除 A 并且不影响任何其他元素。根据文档，我有一个key，并尝试使用带有字符串前缀的 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>

Answer 1

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

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));