React中传递carsList给Fahrzeugdaten组件二次渲染时出现undefined

核心问题与解决方法： #

• 初始状态未定义：carsList的初始值为undefined，当直接访问/fahrzeugdaten/:id路由时，组件会在axios请求完成前提前渲染，导致二次渲染时仍可能拿到undefined。
• 子组件未接收数据：Fahrzeugdaten组件虽接收到carsList，但未将其传递给需要使用数据的CarPage子组件，这会导致CarPage中出现undefined。

具体修改： #

1. 初始化state默认值：在App组件中给carsList设置空数组初始值，避免初始状态为undefined：

const [carsList, setCarsList] = useState([]);

2. 传递数据到子组件：在Fahrzeugdaten组件里把carsList传给CarPage：

<CarPage carsList={carsList} />

3. 可选优化（按需添加）：若要避免渲染未加载完成的数据，可在App组件中增加加载状态，等请求完成后再渲染路由：

// 添加加载状态
const [loading, setLoading] = useState(true);

const fetchCars = async () => {
  try {
    const res = await axios.get(url);
    setCarsList(res.data);
  } catch (error) {
    console.log(error.response.data.error);
  } finally {
    setLoading(false);
  }
};

// 路由部分修改
<Routes>
  {/* 其他路由保持不变 */}
  {!loading && (
    <Route path='/fahrzeugdaten/:id' element={<Fahrzeugdaten carsList={carsList} />}/>
  )}
</Routes>

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