React Native使用Hooks在列表顶部新增元素及map()渲染问题

两个异常都是状态更新代码写错导致的，核心问题有三个：

• 连续两次调用setListTab不会同步生效：React对异步回调里的状态更新做批处理，第二次setListTab的回调参数拿不到第一次刚传入的result，拿到的还是上一轮渲染的旧状态值。
• 新数组结构完全不符合预期：你写的[listTab, {id: 18, name: "All", ...listTab}]生成的不是一维列表数组：
  1. 第一个元素直接塞入了整个listTab数组，不是单个列表项对象
  2. 把数组展开到对象中时，会把数组索引转为对象的键，最终得到的是一个带原数组所有索引属性的畸形对象，不是你要的"All"选项
     最终生成的数组是嵌套结构，map遍历时只有带name:"All"的属性能被正常读取，其余项要么是数组要么结构异常，所以页面只显示这一条新增数据。
• 控制台打印结果有误导性：你在then里同步打印listTab，拿到的是当前闭包里缓存的旧状态值，不是React实际更新后用于渲染的状态，所以会出现“打印有完整数据但渲染不对”的错觉。

不需要拆分两次状态更新，拿到接口返回结果后直接把新元素拼在数组头部，一次生成正确结构的数组再设置状态即可：

fetch()
**********
.then((result) => {
  // 新元素放第一位，后面展开接口返回的原数组，生成标准一维数组
  setListTab([
    { id: 18, name: "All" },
    ...result
  ]);
})

渲染部分的逻辑不需要修改，只要传入的listTab是结构正确的一维数组，map就能正常遍历渲染所有列表项：

<ScrollView 
  showsHorizontalScrollIndicator={false} 
  horizontal={true}
>
  {listTab.map(item => (
    <TouchableOpacity 
      key={item.id} 
      activeOpacity={1}
    > 
      <Text>{item.name}</Text>
    </TouchableOpacity>
  ))}
</ScrollView>

补充注意：不要在设置状态后立刻同步打印状态值，受React异步更新和闭包影响，打印结果大概率和你预期不一致，如果要调试状态变化，可以把console.log写在组件顶层，或者用useEffect监听listTab变化后打印。

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