react-native-sortable-list列表渲染及数据更新不重渲染问题求助

嘿，我来帮你搞定这个问题！

首先，你的核心问题出在直接修改了原state里的数组——数组属于引用类型，你用let d = this.state.data只是拿到了原数组的引用，d.push()修改的其实还是原state中的数组。之后调用setState时，React检测不到data的引用发生变化，自然不会触发组件重渲染。

修复代码的关键步骤 #

你需要先创建一个原数组的全新副本，再对这个副本做修改，最后把新数组传给setState，这样React就能识别到状态变化，触发组件更新了。

修改后的代码示例：

setInterval(() => {
  // 用扩展运算符创建原数组的新副本
  let d = [...this.state.data];
  d.push({
    image: 'https://placekitten.com/200/240',
    text: 'Chloe3',
  });
  this.setState({ data: d });
}, 1500)

也可以用slice()方法创建副本，效果是一样的：

let d = this.state.data.slice();

关于react-native-sortable-list的基础渲染说明 #

要正确渲染列表，你需要确保这几个核心配置：

• 给组件传入维护好的data状态数组
• 实现renderRow方法，定义每一项的渲染样式
• 如果需要排序功能，配置onRowMoved回调处理排序后的数组更新

举个基础的渲染结构示例：

import SortableList from 'react-native-sortable-list';

// ...

render() {
  // 定义每一行的渲染逻辑
  const renderRow = ({data, index}) => (
    <View style={{padding: 16, borderBottomWidth: 1}}>
      <Image source={{uri: data.image}} style={{width: 200, height: 240}} />
      <Text style={{marginTop: 8}}>{data.text}</Text>
    </View>
  );

  return (
    <SortableList
      data={this.state.data}
      renderRow={renderRow}
      // 可选：处理排序后的数组更新
      onRowMoved={({from, to}) => {
        const newData = [...this.state.data];
        const [movedItem] = newData.splice(from, 1);
        newData.splice(to, 0, movedItem);
        this.setState({data: newData});
      }}
    />
  );
}

记住，不管是添加新数据还是处理排序后的数组，都要操作新的数组副本，绝对不要直接修改原state里的数组，这样才能保证组件正确触发重渲染。

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