Question

TypeError：无法读取 null React.js 的属性“map”

2021-04-07

2393

javascript reactjs api react-redux react-hooks

Movie.js

这是我的 React 组件抛出的 map 属性无法读取错误。它只发生在我刷新页面时，意味着首次渲染时，但是当我注释和取消注释 map 函数时，它会获得正确的结果并将我的数据渲染到 DOM，如果刷新页面它会显示错误，我认为我的 DOM 在获取数据之前渲染。也使用了 axios 但结果相同。我为此苦苦挣扎了 4 天。谢谢

import React,{useState, useEffect} from "react";
// import axios from "axios";
// import Datacard from './Datacard';

function Movie (){
    const [movieData, setmovieData] = useState(null);
    useEffect(()=>{
        getdata2()
    },[]);
    function getdata2(){
        fetch('https://api.themoviedb.org/3/trending/movie/day?api_key=91d216ec6cb5cb93f831efa4ca831725')
        .then(async(res) => await res.json())
        .then((data)=>{setmovieData(data.results);console.log(data.results)})
    }
    return(<>
            <div>
                <p>safsdfasdfd</p>
                {movieData.map(value=>(<div>{value.title}</div>))} //if I just comment & uncomment this part I get proper results, but when I refresh page I get error  
            </div>
        </>
    );
}
export default Movie;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './index.scss';
import Movie from './Movie';
// import App from './App';`

ReactDOM.render(
  <>
  <BrowserRouter>
  <Movie/>
  </BrowserRouter>
  </>,
  document.getElementById('root')
);

console error

Movie.js:17 Uncaught TypeError: Cannot read property 'map' of null
    at Movie (Movie.js:17)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:8)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (index.scss?7975:82)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

修复：您需要在 useState 中设置初始值。相反， null 设置空数组 ( [] )，因为 .map 是数组函数。

const [movieData, setmovieData] = useState([]);

或者使用 movieData? 检查是否为空

{movieData?.map(value=>(<div>{value.title}</div>))}

或者

{movieData === null
      ? "Loading..."
      : movieData.map(....)}

理论：请看下面的图片。这是 React 组件的生命周期。 --- 安装 // 第一列

安装组件 Movie
使用 null
执行 useEffect 但这是异步函数
渲染返回 - 此处出现错误。您只是为 movieData 传递了 null ，并且无法对 null 执行 .map ，它看起来像 null.map(....)

---更新 // 第二列

当您从 fetch 获得结果时，React 会自动执行更新并使用数组 [mov1, mov2, mov3] 再次重新渲染组件，然后您可以执行 .map() 函数

谢谢， Ivan

Answer 2

您将 movieData 初始化为 null。因此发生该错误。请将该 movie Data 初始化为空数组。

const [movieData, setmovieData] = useState([]);

Answer 3

当组件首次呈现时， movieData 的值为 null 。

您应该使用空数组初始化 movieData ，或者根据 movieData 是否为真（非空）有条件地呈现内容。