为什么点击触发useState更新时会随机更换图片？React入门问题求解

问题根因 #

• React函数组件的核心特性是每次状态更新都会触发整段组件代码重新执行，你当前生成随机图片、随机姓名的逻辑直接写在组件顶层，没有做持久化缓存处理，所以每次点击修改estado状态触发重渲染时，这部分随机生成逻辑都会重新运行，自然就生成了新的图片和姓名。

修复方案 #

我们可以把生成好的人物数据用useState缓存起来，仅在组件第一次初始化的时候生成一次即可，后续状态更新不会再重新触发生成逻辑：

import { useState } from 'react';
import React from 'react';
import './estilos.css';

export default function Test({ sex }) {
  var nombresHombre = ["test","test2","test3"]
  var nombresMujer = ["west","west2","west3"]
  function random(mn, mx) {
    return Math.random() * (mx - mn) + mn;
  }
  function crearHombre() {
    var nand = Math.floor(random(1, 99));
    var url = `https://randomuser.me/api/portraits/men/${nand}.jpg`;
    var nombre = nombresHombre[Math.floor(random(1, nombresHombre.length))];
    return { url, nombre };
  }
  function crearMujer() {
    var nand = Math.floor(random(1, 99));
    var url = `https://randomuser.me/api/portraits/women/${nand}.jpg`;
    var nombre = nombresMujer[Math.floor(random(1, nombresMujer.length))];
    return { url, nombre };
  }
  // 把生成persona的逻辑放到useState的初始化函数中，仅组件首次挂载时执行一次
  const [persona] = useState(() => {
    const primerrandom = Math.floor(Math.random() * 2 + 1);
    if (sex === 'male') {
      return crearHombre();
    } else if (sex === 'female') {
      return crearMujer();
    } else if (primerrandom === 1) {
      return crearHombre();
    } else {
      return crearMujer();
    }
  })
  const [estado, cambioestado] = useState(true);
  const className = estado ? '' : 'disabled';
  return (
    <>
      <picture className='picture'>
        <img
          className={`imagenes ${className}`}
          onClick={() => {
            cambioestado(!estado);
          }}
          src={persona.url}
        ></img>
        <span className='span'>{persona.nombre}</span>
      </picture>
    </>
  );
}

如果你的sex props后续存在变更的需求，可以改用useMemo缓存人物数据，把依赖项设为sex即可，这样只有sex变化时才会重新生成人物数据，其余状态更新不会触发生成逻辑。

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