时间戳

首页 > 解决方案 > 在 reactjs 中，单个组件中的多个 api 调用由于状态更改而导致不必要的渲染

reactjs - 在 reactjs 中，单个组件中的多个 api 调用由于状态更改而导致不必要的渲染

问题描述

const [MusicData, setMusicData] = useState(null)
const [TopArtistsdata, setTopArtists] = useState(null)

const getMusic = async () =>{
        try {
            const response = await axios.get(URL)
            setMusicData(response.data)
        } catch (error) {
            console.log("error fetching data")
        }
    }

const getTopArtists = async () =>{
        try {
            const responseOfArtists = await axios.get(URL)
            setTopArtists(response.data.artists.data)
        } catch (error) {
            console.log(error,"error fetching data")
        }
    }

useEffect(() => {
            getMusic()
        
            getTopArtists()
        }
        
    }, [])

我将这两种状态传递给两个子组件。第一个加载但第二个显示错误，因为它在第一次渲染中为空。Console.log(TopArtistsdata) 两次显示“null”，第三次获取数据。所以从技术上讲，父组件正在重新渲染 3 次。第 2 次第 2 次状态为空。我不明白问题出在哪里。

标签： reactjsreact-hooks

解决方案

下面列出了三个渲染的原因：

  1. 初始渲染（第一次渲染初始值，即 null）
  2. 让我们假设 getMusic 调用成功，然后它将执行 setState（第二次渲染，MusicData 具有值，TopArtistsdata 为空）
  3. 现在，如果 getTopArtists 成功，那么它将再次渲染（#rd 渲染，MusicData 具有价值，TopArtistsdata 具有价值）

如果您不想让子组件出现错误，请将初始值与子组件的预期保持在状态内。

如果您有两个状态变量，则需要重新渲染。您可以最小化使用 promise.all

推荐阅读