Question

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

}

以上代码不起作用。它说“类型错误：data.map 不是函数”

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

Answer 1

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

迭代对象的方法之一如下

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

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

1 个答案: