React子组件如何避免本地数组在重渲染时被重新声明？

因为React函数组件每次渲染时，内部变量都会重新声明初始化，所以你直接在组件里写let flightList = []，每次重渲染都会得到空数组，push后自然只有最新的一条数据。结合你“父组件负责管理状态，子组件不管理状态”的要求，正确的做法是把航班数组的维护逻辑放到父组件中，子组件仅负责渲染完整数组。

步骤1：父组件维护航班数组状态 #

在父组件中创建状态数组存储所有航班，每次有新航班时更新这个数组：

import { useState } from 'react';
import FlightList from './FlightList';

const ParentComponent = () => {
  // 初始化空的航班数组状态
  const [flightList, setFlightList] = useState([]);

  // 新增航班的逻辑（可根据实际场景触发，比如表单提交、接口回调）
  const addNewFlight = (newFlight) => {
    // 使用函数式更新确保获取到最新的数组状态
    setFlightList(prevList => [...prevList, newFlight]);
  };

  return (
    <>
      {/* 这里可以添加触发addNewFlight的交互，比如按钮、表单 */}
      {/* 将完整的航班数组传递给子组件 */}
      <FlightList flights={flightList} />
    </>
  );
};

步骤2：子组件接收并渲染数组 #

修改FlightList组件，直接使用父组件传递的完整航班数组，不再本地维护数组：

import Card from '../UI/Card';

const FlightList = (props) => {
  const { flights } = props;

  console.log('flightlist array', flights);

  return (
    <ul>
      {/* 遍历航班数组渲染每一项 */}
      {flights.map((flight, index) => (
        <li key={flight.id || index}> {/* 优先使用航班的唯一ID作为key，无唯一ID时用index */}
          <Card>
            <h1>{flight.name}</h1> {/* 替换为你实际需要渲染的航班属性 */}
            {/* 可添加更多航班信息的渲染 */}
          </Card>
        </li>
      ))}
    </ul>
  );
};

export default FlightList;

核心逻辑说明 #

React状态管理遵循“数据归属”原则：谁拥有数据、谁需要修改数据，就由谁来维护状态。父组件负责状态管理，那么所有航班数据的存储和更新都应该放在父组件中，子组件只做纯渲染工作，这样既符合你的要求，也从根本上解决了子组件重渲染时数组被重置的问题。

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