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

【问题标题】：React.js - child component props undefinedReact.js - 子组件道具未定义
【发布时间】：2021-04-16 04:28:14
【问题描述】：

我正在尝试将数据从父组件传递到子组件。数据是从 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;

以下是接收 props 的子组件：

const Child = ({ data }) => {

    const test = data.map(el => el);
    console.log(test);

}

上面的代码不起作用。它说“TypeError：data.map 不是函数”

我知道这是因为在初始渲染时，数据还没有为子组件准备好，因此“数据”是未定义的。我应该怎么做才能使这些“数据”发挥作用？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

Child 组件中的 typeOf data 不是数组，它是 object 和 .map 是 array 函数，因此出现错误。改为检查并记录变量 data。

下面是一种迭代对象的方法

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

【讨论】：

非常感谢！现在我明白为什么 .map 不起作用了。