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

Question

I'm trying to pass data from parent to child component. The data is fetched from API.

Following is the parent component:

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;

And the following is the child component which receives props:

const Child = ({ data }) => {

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

}

Above code doesn't work. It says 'TypeError: data.map is not a function'

I understand this is because at the initial render the data is not ready for child component thus 'data' is undefined. What should I do to make this 'data' work?

Answer 1

The typeOf data in Child component is not an Array, its an object and .map is an array function, hence the error. Check and log variable data instead.

One of the ways to iterate an object is below

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