为什么 useState 随机点击更改我的图像？

Question

我从反应开始，我进行学习练习，我尝试使它复杂化，但我被阻止了，因为不理解它，我有一个组件，它生成图像和名称，名称从数组中获取名称，我尝试使用 usestate 更改图像的 class，但它们为我生成了一个新图像并使用新的 class 名称命名，为什么？我只想更改此 class，而不是生成新图像。

非常感谢你的帮助。

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 };
  }
  const primerrandom = Math.floor(Math.random() * 2 + 1);
  if (sex === 'male') {
    var persona = crearHombre();
  } else if (sex === 'female') {
    var persona = crearMujer();
  } else if (primerrandom === 1) {
    var persona = crearHombre();
  } else {
    var persona = 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>
    </>
  );
}

.picture {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100px;
}
.imagenes {
  border-radius: 70px;
  box-shadow: 0 0 15 #999;
  width: 100px;
}
.disabled {
  opacity: 0.3;
}
.span {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

  const primerrandom = Math.floor(Math.random() * 2 + 1);
  if (sex === 'male') {
    var persona = crearHombre();
  } else if (sex === 'female') {
    var persona = crearMujer();
  } else if (primerrandom === 1) {
    var persona = crearHombre();
  } else {
    var persona = crearMujer();
  }

此代码会在组件每次渲染时运行，并且由于它是随机选取的，因此您将在每次渲染时获得随机结果。

如果你只想随机选择一个人，那么你可以使用useMemo这样你就不会重复计算：

const persona = useMemo(() => {
  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 };
  }

  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();
  }
}, []); // <------------ this empty array says to never calculate again

或者如果您希望以后能够更改它，您可以使用状态变量

const [persona, setPersona] = useState(() => {
  // ... same code as the previous example, ending in:
  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();
  }
});

为什么 useState 随机点击更改我的图像？

why useState change my image random onclick?

reactjs

react-hooks

use-state