在 React 中获取连续调用

Question

我正在从 json 文件中获取数据，但问题是当我检查网络选项卡时。不断有人打电话询问我能做什么来解决这个问题。 :

class Banner extends Component {

    constructor(props) {
        super(props);
        this.state = {
          buttonLink:"",
          bannerImg:""
        };
    }


    render() {


        const a =  fetch("./logo.json").then(response => response.json())
        .then((temp1)=> {this.setState({buttonLink:temp1.buttonLink,bannerImg:temp1.bannerImg});  
    });
   
return(....
<img src={this.state.bannerImg}></img>
....
)

Answer 1

在类组件中，您可以使用一些生命周期方法，例如 componentDidMount 所以将你的 fetch 方法放在 componentDidMount 中而不是在 render 方法中，因为每当你调用 setState() 方法时，它都会再次调用 render 方法，并且在你的 render 方法中你再次调用 api 和 setState ，这会产生无限循环，做一些事情像这样：

 componentDidMount(){
   const a = fetch("./logo.json").then(response => response.json())
  .then((temp1)=> {this.setState({buttonLink:temp1.buttonLink,bannerImg:temp1.bannerImg});  
 }

Answer 2

您不能在

render

函数内调用 fetch。

您可以使用功能组件轻松获取数据。

import React, { useEffect, useState } from 'react';

const Banner = () => {
    const [image, setImage] = useState({ buttonLink: '', bannerImg: '' });

    useEffect(() => {
        fetch('./logo.json')
            .then((response) => response.json())
            .then((temp1) => {
                setImage({ buttonLink: temp1.buttonLink, bannerImg: temp1.bannerImg });
            });
    }, []);

    return <img src={image.bannerImg}></img>;
};

export default Banner;