React JS/Typescript axios 变量赋值

Question

React JS,axios,我用axios做的get操作成功返回“response.data.title”。但是，当我将它分配给 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

Answer 1

制作 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>
 )
}

Answer 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

React JS/Typescript axios 变量赋值

React JS/Typescript Axios Variable Assignment

typescript

reactjs

axios

use-state