Ionic v6 React对象数组渲染异常？仅渲染单个元素求助

问题描述 #

代码尝试将包含两个元素的对象数组存入状态，但最终页面仅渲染出其中一个元素。

复现代码 #

import {
  IonCard,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonCardContent,
} from '@ionic/react'
import { useEffect, useState } from 'react'
import './ExploreContainer.css'

interface ContainerProps {}

interface TestArrayObject {
  key: string
  id: string
  name: string
  age: number
}

const ExploreContainer: React.FC<ContainerProps> = () => {
  const [testArray, setTestArray] = useState<TestArrayObject[]>([])

  const arraySample: TestArrayObject[] = [
    {
      key: '1',
      id: '12345',
      name: 'Jack',
      age: 40,
    },
    {
      key: '2',
      id: '67890',
      name: 'Black',
      age: 30,
    },
  ]

  useEffect(() => {
    arraySample.map((arr: TestArrayObject) => {
      setTestArray([...testArray, arr])
    })
  }, [])

  const listArray = testArray.map((arr) => {
    return (
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>{arr.id}</IonCardSubtitle>
          <IonCardTitle>{arr.name}</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          Keep close to Nature's heart... {arr.age}
        </IonCardContent>
      </IonCard>
    )
  })

  return <> { listArray } </>
}

export default ExploreContainer

问题原因 #

在useEffect中通过map循环调用setTestArray时，由于React闭包特性，每次执行setTestArray时，testArray都指向组件初始化时的空数组：

1. 第一次执行setTestArray([...testArray, arr])，得到数组[第一个元素]
2. 第二次执行时，testArray依然是空数组，得到数组[第二个元素]，最终状态被覆盖为仅包含第二个元素的数组

解决方案 #

方案1：直接赋值（适用于静态数组） #

如果数组是静态的，无需循环添加，直接将整个数组赋值给状态：

useEffect(() => {
  setTestArray(arraySample);
}, []);

方案2：函数式更新（适用于动态添加场景） #

如果需要动态向数组中添加元素，使用React的函数式更新获取最新状态，避免闭包问题：

useEffect(() => {
  arraySample.forEach((arr: TestArrayObject) => {
    setTestArray(prevArray => [...prevArray, arr]);
  });
}, []);

注：这里用forEach替代map更合适，因为我们只需要执行添加操作，不需要返回新数组

额外优化：添加列表项key属性 #

React渲染列表时，必须为每个列表项添加唯一的key属性，避免渲染警告并优化性能：

const listArray = testArray.map((arr) => {
  return (
    <IonCard key={arr.key}>
      <IonCardHeader>
        <IonCardSubtitle>{arr.id}</IonCardSubtitle>
        <IonCardTitle>{arr.name}</IonCardTitle>
      </IonCardHeader>

      <IonCardContent>
        Keep close to Nature's heart... {arr.age}
      </IonCardContent>
    </IonCard>
  )
})

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