FlatList无法正常展示获取的数据问题求助

• 通过Axios根据用户搜索词获取数据，控制台打印响应数据及赋值后的state均正常，但FlatList展示为空，且列表项数量与实际数据不符
• 尝试修改FlatList的extraData属性为search或searchResults，无效果
• 移除useEffect钩子并设置静态state时，FlatList可正常展示静态数据

相关代码 #

const [search, setSearch] = useState("");
const [searchResults, setSearchResults] = useState(null);

useEffect(() => {
  axios
    .get(`http://BASE_URL/api/${props.categoryName}/${search}`)
    .then((response) => {
      setSearchResults(response.data.result);
    })
    .catch((error) => {
      console.log(error);
    });
  console.log(searchResults);
}, [search]);

// ...

<FlatList
  extraData={search}
  keyboardShouldPersistTaps="always"
  style={styles.list}
  data={searchResults}
  renderItem={({ item }) => (
    <Pressable
      style={[styles.item, props.itemStyle]}
      onPress={() => onSelect(item)}>
      <Text style={[styles.itemText, props.itemTextStyle]}>
        {item.Name}
      </Text>
    </Pressable>
  )}
/>

控制台响应数据（搜索词为"god"时） #

[{"Id":2,"Name":"The Godfather","Year":1972},{"Id":4,"Name":"The Godfather Part II","Year":1974}]

修复方案 #

1. 初始化state为数组
   FlatList的data属性要求传入数组类型，原代码初始值设为null，会导致初始渲染时组件无法识别数据。修改state初始化：

const [searchResults, setSearchResults] = useState([]);

2. 处理state更新的异步性
   原代码中console.log(searchResults)放在useEffect末尾，此时setSearchResults还未完成state更新，打印的是上一轮state。若要查看更新后的数据，可添加单独的useEffect监听：

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

3. 确保数据始终为数组
   防止接口返回非数组数据导致FlatList异常，设置state时做兜底处理：

.then((response) => {
  const result = Array.isArray(response.data.result) ? response.data.result : [];
  setSearchResults(result);
})

4. 添加keyExtractor
   显式指定列表项的唯一key，避免渲染异常：

<FlatList
  extraData={searchResults}
  keyboardShouldPersistTaps="always"
  style={styles.list}
  data={searchResults}
  keyExtractor={(item) => item.Id.toString()} // 新增
  renderItem={({ item }) => (
    <Pressable
      style={[styles.item, props.itemStyle]}
      onPress={() => onSelect(item)}>
      <Text style={[styles.itemText, props.itemTextStyle]}>
        {item.Name}
      </Text>
    </Pressable>
  )}
/>

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