React使用Axios请求赋值后页面无法渲染title内容问题

• 直接修改只读Props：你代码里的title是父组件传入的Props属性，React规定Props为只读值，直接对其赋值属于无效操作，不会变更实际值。
• 未使用响应式状态：React组件仅会在状态（State）或Props更新时触发重新渲染，你修改的普通变量/Props不会通知组件刷新页面，所以视图不会更新。
• useEffect缺少依赖数组：当前useEffect未传入第二个依赖参数，会在组件每次渲染后重复执行GET请求，造成不必要的性能消耗甚至请求死循环。

如果该title值由当前组件内部维护，不需要父组件传入，可参考以下代码修改：

import React, { FC, useEffect, useState } from 'react'
import axios, { AxiosResponse } from "axios";

// 不需要父传title可直接清空Props定义
interface HowToContactAShopProps {}

const HowToContactAShop: FC<HowToContactAShopProps> = () => {
  // 定义响应式状态存储title，初始值设为空字符串
  const [title, setTitle] = useState<string>('')

  useEffect(() => {
    axios.get('http://localhost:1337/reviews/1')
    .then((response: AxiosResponse) => {
      // 调用set方法更新状态，自动触发组件重渲染
      setTitle(response.data.title)
    });
  // 传入空依赖数组，仅在组件首次挂载时执行1次请求
  }, []);

  return (
    <NavbarLayout>
      <H1>How to Contact a Shop</H1>
      <H1>{title}</H1>
    </NavbarLayout>
  )
}
export default HowToContactAShop

如果title需要由父组件管控，只需在Props中新增修改title的回调方法，请求成功后调用该回调更新父组件的状态即可。

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