Question

<块引用>

电影.js

这是我的 React 组件抛出地图属性无法读取的错误。它只是在我刷新页面时发生，意味着第一次渲染，但是当我注释和取消注释地图函数时，它会得到正确的结果并将我的数据渲染到 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')
);

<块引用>

控制台错误

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

您将 movieData 初始化为 null。所以出现那个错误。请将该电影数据初始化为空数组。

$proditem = Category::with('products.cardImage')->get();

Answer 2

组件第一次渲染时，movieData 的值为 null。

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

Answer 3

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

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

或使用 movieData?

检查 null

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

或

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

理论：请看下图。有反应组件的生命周期。 --- 安装 // 第一列

安装组件 Movie
使用 null 初始化电影数据
执行 useEffect 但这是异步函数
呈现返回 - 此处出现错误。您只需将 null 传递给 movieData 并且您无法在 .map 上执行 null 看起来像 null.map(....)

---更新 // 第二列

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

谢谢，伊万

类型错误：无法读取空 React.js

3 个答案: