如何讓子組件使用 App.js 道具數據中的 map()？

Question

我的反應是18.2。 我希望子組件從 App.js 接收數據並使用 map()。

我檢查了子組件收到數據，但不知道為什么它不能使用map()。

它顯示了這個錯誤。

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

那么有人可以修復它嗎？ 我想這是渲染問題，但我不知道如何解決它，謝謝。

獲取（）：

[
  { id:1, date: '2011-01-01T00:00:00.000Z' },
  { id:2, date: '2013-09-03T00:00:00.000Z' },
  { id:3, date: '2012-04-02T00:00:00.000Z' },
  { id:4, date: '2013-12-08T00:00:00.000Z' },
  { id:5, date: '2010-01-23T00:00:00.000Z' },
];

應用程序.js：

import { Child } from './Child';

const Test = () => {
  const [toChild, setToChild] = useState()
  useEffect(() => {
    const data = async () => {
      const fetchedData = await fetched();
      setToChild(fetchedData)
    };
    data();
  }, []);

  const test = () => {
    setToChild(fetchedData)
  }
}

return(<Child toChild={toChild}>)

Child.js：

const Child = ({ toChild }) => {
  const data = toChild;

  const getDate = data.map((item) => item.date);

Answer 1

由於來自您的 fetch 的數據是一個對象數組，您可能希望將 state 初始化為一個空數組useState([]) ，一旦安裝了組件， useEffect就會觸發，所以首先， toChild將是undefined的，這就是為什么你得到那個錯誤。 所以基本上：

import { useState, useEffect } from 'react'
import { Child } from './Child';

const Test = ()=>{
const [toChild,setToChild] = useState([])

useEffect(() => {
    const data = async () => {
      const fetchedData = await fetched();
      setToChild(fetchedData)
    };
    data();
  }, []);

return <Child toChild={toChild} />

Answer 2

Jsx 已經在 javascript 之前渲染，即使您從服務器獲取數據但 html 已經渲染到瀏覽器。所以添加任何加載組件。 toChild?:<div>loading</div>:<Child toChild={toChild}/>