array.splice失效求助：调用后始终删除数组最后一个元素

嘿，我来帮你搞定这个头疼的问题！你遇到的splice总是删掉最后一个元素的情况，主要是两个常见的React开发误区导致的，咱们一步步拆解解决：

1. 用数组索引作为key引发的索引混乱 #

这是最关键的原因：React依靠key来追踪组件的唯一性，当你用数组的index作为key时，删除中间元素后，数组的索引会重新排列，但React会复用之前的组件（因为key还是原来的数字），这就导致后续组件的index属性和实际数组的索引不匹配——你点击删除按钮时传递的是旧的索引，看起来就像是删掉了最后一个元素。

解决方案：给每个组件/JSON对象生成唯一标识，比如用时间戳、uuid库，或者自定义递增id，用这个唯一值作为key，删除时通过这个标识来定位目标，而不是依赖索引。

2. 直接修改全局变量+未创建数组副本导致状态更新异常 #

你目前用的rendercomponent和childJson是全局变量，直接修改它们后调用setState，React可能无法检测到数组的变化（因为数组是引用类型，修改原数组不会改变引用地址），而且全局变量很容易引发组件状态不一致的问题。

解决方案：把这两个数组移到组件的state中管理，修改状态时创建数组的副本（用扩展运算符[...arr]或者slice()），再通过setState更新。

修改后的完整代码示例 #

class YourComponent extends React.Component {
  // 初始化state，把数组放在状态里
  state = {
    documents: [],
    Json: [],
    formValues: {}
  };

  add() {
    // 生成唯一id，这里用Date.now()简单实现，生产环境建议用uuid库
    const uniqueId = Date.now();
    // 把组件和id绑定
    const newComponent = { id: uniqueId, component: UiInput };
    const newJson = {
      id: uniqueId,
      service: this.state.formValues.text,
      tax: this.state.formValues.tax,
      amount: this.state.formValues.amount
    };
    // 用函数式setState确保拿到最新的状态，创建新数组更新
    this.setState(prevState => ({
      documents: [...prevState.documents, newComponent],
      Json: [...prevState.Json, newJson]
    }));
  }

  componentDidMount() {
    const initialId = Date.now();
    const initialComponent = { id: initialId, component: UiInput };
    this.setState({
      documents: [initialComponent]
    });
  }

  dynamicJson() {
    return {
      "service": this.state.formValues.text,
      "tax": this.state.formValues.tax,
      "amount": this.state.formValues.amount
    };
  }

  // 现在通过id来删除元素，不用依赖索引
  popComponent = (id) => {
    this.setState(prevState => ({
      documents: prevState.documents.filter(item => item.id !== id),
      Json: prevState.Json.filter(item => item.id !== id),
      formValues: {}
    }));
  };

  render() {
    return (
      <div>
        {this.state.documents.map((item) => {
          const Element = item.component;
          // 用唯一id作为key，传递id给删除函数
          return <Element 
            key={item.id} 
            onUpdate={this.onUpdate} 
            popComponent={() => this.popComponent(item.id)} 
          />;
        })}
      </div>
    );
  }
}

额外说明 #

• 用函数式setState（prevState => {...}）是为了确保我们操作的是最新的状态，避免状态更新的异步性导致的问题。
• 过滤数组的方式比splice更简洁，而且不会修改原数组，符合React的状态不可变原则。

内容的提问来源于stack exchange，提问作者Nandkishor Shinde