React组件重复渲染：updatePlanet函数多次调用问题求助

你的问题核心是直接在组件函数体中调用updatePlanet()，导致组件每次渲染时都会执行这个函数，而函数内部的状态更新（setId、setPopulation等）又会触发组件重新渲染，形成无限循环，所以看起来函数被多次执行。

解决步骤 #

1. 用useEffect控制执行时机
   将updatePlanet()的调用放到useEffect钩子中，并设置空依赖数组[]，确保它只会在组件挂载时执行一次。

2. 优化服务实例创建
   每次组件渲染都会新建PostService实例属于冗余操作，把实例创建移到updatePlanet内部即可避免重复初始化。

3. 处理React 18开发环境的双重渲染
   React 18的Strict Mode在开发环境会让副作用执行两次，这是框架的调试机制，生产环境不会出现，无需额外处理。

修改后的代码 #

import React, { useState, useEffect } from 'react'
import PostService from '../../API/PostService';

import './PlanetRandom.css'

export default function PlanetRandom() {
  const [id, setId] = useState(null)
  const [population, setPopulation] = useState(null)
  const [rotationPeriod, setRotationPeriod] = useState(null)
  const [diameter, setDiameter] = useState(null)
  const [name, setName] = useState(null)

  const updatePlanet = () => {
    const randomId = Math.floor(Math.random() * 25 + 2)
    const postService = new PostService()
    postService
      .getPlanet(randomId)
      .then((planet) => {
        setId(randomId)
        setPopulation(planet.population)
        setDiameter(planet.diameter)
        setRotationPeriod(planet.rotation_period)
        setName(planet.name)
      })
  }

  useEffect(() => {
    updatePlanet()
  }, []) // 空依赖数组，仅组件挂载时执行一次

  return (
    <div className="random-planet jumbotron rounded">
      {/* 避免id为null时加载无效图片 */}
      {id && (
        <img 
          alt='planet' 
          className="planet-image"
          src={`https://starwars-visualguide.com/assets/img/planets/${id}.jpg`} 
        />
      )}
      <div>
        <h4>{name || 'Loading...'}</h4>
        <ul className="list-group list-group-flush">
          <li className="list-group-item">
            <span className="term">Population</span>
            <span>{population || '-'}</span>
          </li>
          <li className="list-group-item">
            <span className="term">Rotation Period</span>
            <span>{rotationPeriod || '-'}</span>
          </li>
          <li className="list-group-item">
            <span className="term">Diameter</span>
            <span>{diameter || '-'}</span>
          </li>
        </ul>
      </div>
    </div>
  )
}

额外说明 #

• 把原函数内的id变量改为randomId，避免和状态变量重名造成混淆。
• 增加了加载状态的兜底显示，避免初始渲染时null值导致页面异常。
• 如果你之前尝试useEffect未生效，大概率是没设置空依赖数组，或是依赖数组中添加了不必要的变量导致重复触发。

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