Javascript React.js-未定义子组件道具

我正在尝试将数据从父组件传递到子组件。数据是从API获取的

以下是父组件：

const App = () => {

  const [item, setItem] = useState([]);

  useEffect(() => {

      const fetchData = async () => {
        const response = await fetch('http://jsonplaceholder.typicode.com/photos');
        const data = await response.json();
        setItem(data);
    }

      fetchData();

  }, [])

  const slidedData = item.slice(0, 10);

  const data = slidedData.reduce((acc, item) => {
    acc[item.title] = (acc[item.title] || 0) + 1;
    return acc;
  }, {});

    return (
          <Switch>
            <Route
              path="/child"
              render={() =>
                <Child data={data} />
              }
            />
          </Switch>
  )
}

export default App;

上面的代码不起作用。上面写着“TypeError:data.map不是函数”

---

我理解这是因为在初始渲染时，数据尚未准备好用于子组件，因此“数据”未定义。我应该怎么做才能使这个“数据”工作？

子组件中的

数据
的类型不是数组，而是
对象
，
。map
是
数组
函数，因此出现错误。检查并记录变量
数据

迭代对象的方法之一如下所示

Object.keys(data).map(function(keyName, keyIndex) {
  ...
})

子组件中的
数据
类型不是数组，它是
对象
，而
映射
是
数组
函数，因此出现错误。检查并记录变量
数据

迭代对象的方法之一如下所示

Object.keys(data).map(function(keyName, keyIndex) {
  ...
})

非常感谢你！现在我明白为什么了。地图没用。非常感谢！现在我明白为什么了。地图没用。