React控制台对象重复打印 无法获取movie.title存入state问题

• 初始state中movie值为undefined，组件第一次渲染时接口请求还没返回，直接读取movie.title会触发空值报错，打断渲染流程，看起来就像state没有赋值成功
• 控制台重复打印两次返回对象是React 18开发环境严格模式的正常表现：框架会在开发时多执行一次挂载阶段的effect，帮你排查没做清理的副作用问题，打包上线后就不会重复执行
• 你调用的trending/all/week接口会同时返回电影和剧集数据，电影标题存在title字段，剧集标题存在name字段，只读title的话剧集内容会显示不出标题

改两处即可：

1. 给movie设置初始值为空对象，避免首次渲染时空值报错
2. 读标题的时候加可选链判断，同时兼容电影和剧集的标题字段

修复后的完整代码：

import React, { useEffect, useState } from 'react'
import axios from "../../axios"
import {API_KEY} from "../../Constants/constants"
import "./Banner.css"

function Banner() {
  // 初始值设为空对象
  const [movie, setMovie] = useState({})
  useEffect(()=>{
    axios.get(`trending/all/week?api_key=${API_KEY}&language=en-US`).then((res)=>{
      console.log(res.data.results[0]);
      setMovie(res.data.results[0] || {})
    })
  },[])

  return (
    <div className="banner">
        <div className="content">
           {/* 可选链兜底，兼容两类内容标题 */}
           <h1>{movie?.title || movie?.name || ''}</h1>
           <div className="banner-buttons">
              <button className="button">Play</button>
              <button className="button">More-info</button>
           </div>
           <h1 className="description">Part 4 (also referred to as the second part of season 2) Of Netflix's Money Heist consists of 8 episodes. It was released on April 3, 2020. Money Heist Part</h1>
        </div>
        <div className="fade-bottom"></div>
    </div>
  )
}

export default Banner

如果不想开发时看到effect重复执行，可以去项目入口文件把包裹根组件的<React.StrictMode>标签删掉，但更推荐按上面的方式处理边界情况，从根源避免空值导致的渲染错误。

内容的提问来源于stack exchange，提问作者Akshay Padmanabhan