React JS/Typescript Axios 变量赋值答案

【问题标题】：React JS/Typescript Axios Variable AssignmentReact JS/Typescript Axios 变量赋值
【发布时间】：2021-11-19 00:01:03
【问题描述】：

React JS，axios，“response.data.title”在我用axios做的get操作中成功返回。但是，当我将它分配给 title 变量并想在屏幕上显示 {title} 时，什么也没有出现。赋值有问题。

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

interface HowToContactAShopProps {
   title: string
}

const HowToContactAShop: FC<HowToContactAShopProps> = ({ title }) => {

   useEffect(() => {
      axios.get('http://localhost:1337/reviews/1')
     .then((response: AxiosResponse) => {
        title = response.data.title
        console.log(title);
    });
  });

 return (

    <NavbarLayout>

      <H1>How to Contact a Shop</H1>
      <H1>{title}</H1>

  </NavbarLayout>
 )
}
export default HowToContactAShop

【问题讨论】：

title 不是状态变量，所以做简单的赋值不会重新渲染 DOM。

标签： reactjs typescript axios use-state

【解决方案1】：

制作title变量状态变量并使用set state方法更新title。

interface HowToContactAShopProps {
}

const HowToContactAShop: FC<HowToContactAShopProps> = () => {
   const [title, setTitle] = useState<string>('');
   useEffect(() => {
      axios.get('http://localhost:1337/reviews/1')
     .then((response: AxiosResponse) => {
        setTitle(response.data.title)
    });
  }, []);

 return (

    <NavbarLayout>

      <H1>How to Contact a Shop</H1>
      <H1>{title}</H1>

  </NavbarLayout>
 )
}

【讨论】：

【解决方案2】：

除了管理state 之外，在useEffect 上保留空依赖数组也很重要。否则，它将无限重新渲染组件。

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

interface HowToContactAShopProps {
   title: string
}

const HowToContactAShop: FC<HowToContactAShopProps> = ({ title }) => {

    const const [title, setTitle] = useState<string>("");

   useEffect(() => {
      axios.get('http://localhost:1337/reviews/1')
     .then((response: AxiosResponse) => {
        setTitle(response.data.title);
        console.log(title);
    });
  },[]);

 return (

    <NavbarLayout>

      <H1>How to Contact a Shop</H1>
      <H1>{title}</H1>

  </NavbarLayout>
 )
}
export default HowToContactAShop

【讨论】：