React Native：SwipeListView的renderItem内state无法更新求助

问题1：直接访问stateItem.category抛出错误 #

初始状态下stateItem是null，直接读取stateItem.category相当于尝试访问null的属性，必然会触发报错。

解决方式：

• 用可选链操作符做安全访问：

  <Text>{stateItem?.category}</Text>
  

• 或者通过条件渲染，仅当stateItem存在时才渲染文本：

  {stateItem && <Text>{stateItem.category}</Text>}
  

问题2：调用setStateItem后打印stateItem仍为null #

React的useState更新是异步的，调用setStateItem后，当前函数执行栈里的stateItem还是旧值，不会立刻同步更新。

解决方式：
通过useEffect监听stateItem的变化，在回调里打印更新后的值：

useEffect(() => {
  console.log('更新后的stateItem:', stateItem);
}, [stateItem]);

问题3：代码存在语法错误 #

你的TouchableWithoutFeedback组件中，onPress的箭头函数没有闭合括号和大括号，这会导致组件无法正常编译运行。

修复后的完整代码示例 #

import { useState, useEffect, View, Text, TouchableWithoutFeedback } from 'react';
import SwipeListView from 'react-native-swipe-list-view';

const YourComponent = () => {
  const [stateItem, setStateItem] = useState(null);

  useEffect(() => {
    console.log('更新后的stateItem:', stateItem);
  }, [stateItem]);

  return (
    <SwipeListView
      data={list}
      listKey={'list'}
      keyExtractor={item => item.id} // 修正参数名错误，原代码写的是list
      closeOnScroll={true}
      closeOnRowBeginSwipe={true}
      renderItem={({ item }) => (
        <View>
          <TouchableWithoutFeedback
            onPress={() => {
              setStateItem(item);
            }}
          >
            <View>
              <Text>{stateItem?.category}</Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      )}
    />
  );
};

export default YourComponent;

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