如何每隔X秒更改狀態

Question

我需要每X秒鍾更改每個頭像的名稱，我已經按照此解決方案進行了工作，但是它可以正常工作，但是現在，它會將所有名稱從RandomAcidName數組更改為相同的名稱。

我想我也需要遍歷此列表，因此每個名稱僅傳遞一次給每個化身。

這是我的代碼

nameJuggler將名稱傳遞給每個頭像

import React, { Component } from "react";
import "./Avatar.scss";
import AcidData from "../Acidsdata/Acids-data.json";
import RandomAcidName from "../../../src/randomAcidName.json";

const getDate = new Date();
const getDay = getDate.getDate();
const getMonth = getDate.getMonth() + 1;
const fullTodayDate = getDay + "/" + getMonth;

const AvatarDisplay = props => {
  return (
    <div key={props.id} className="container__position-relative">
      <img src={props.photo} alt={props.name} className="avatar__img" />
      <div className="container__position-absolute avatar__name">
        <span>{props.name}</span>
      </div>
      {props.cumple}
    </div>
  );
};

class AcidPoblation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sudoNameId: 0,
      acidos: AcidData,
      randomName: RandomAcidName
    };
  }

  componentDidMount() {
    this.changeName = setInterval(() => {
      let currentSudoNameId = this.state.sudoNameId;

      this.setState({
        sudoNameId: currentSudoNameId + 1
      });
    }, 1500);
  }

  componentDidUnmount() {
    clearInterval(this.changeName);
  }

  render() {
    let nameJuggler =
      RandomAcidName[this.state.sudoNameId % RandomAcidName.length];

    return (
      <main className="container__grid">
        {this.state.acidos.map(item => (
          <AvatarDisplay
            photo={item.acidphoto}
            name={nameJuggler}
            birth={item.birthdate}
            id={item.acidid}
            cumple={
              item.birthdate === fullTodayDate ? (
                <img
                  src="https://via.placeholder.com/40x40"
                  alt="feliz cumpleaños"
                  className="container__position-absolute avatar__birth-date"
                />
              ) : null
            }
          />
        ))}
      </main>
    );
  }
}

export default AcidPoblation;

這是傑森的名字

[

  "Anderson",
  "Ashwoon",
  "Aikin",
  "Bateman",
  "Bongard",
  "Bowers",
  "Boyd",
  "Cannon",
  "Cast",
  "Deitz",
  "Dewalt",
  "Ebner",
  "Frick",
  "Hancock",
  "Haworth",
  "Hesch",
  "Hoffman",
  "Kassing",
  "Knutson",
  "Lawless",
  "Lawicki",
  "Mccord",
  "McCormack",
  "Miller",
  "Myers",
  "Nugent",
  "Ortiz",
  "Orwig",
  "Ory",
  "Paiser",
  "Pak",
  "Pettigrew",
  "Quinn",
  "Quizoz",
  "Ramachandran",
  "Resnick",
  "Sagar",
  "Schickowski",
  "Schiebel",
  "Sellon",
  "Severson",
  "Shaffer",
  "Solberg",
  "Soloman",
  "Sonderling",
  "Soukup",
  "Soulis",
  "Stahl",
  "Sweeney",
  "Tandy",
  "Trebil",
  "Trusela",
  "Trussel",
  "Turco",
  "Uddin",
  "Uflan",
  "Ulrich",
  "Upson",
  "Vader",
  "Vail",
  "Valente",
  "Van Zandt",
  "Vanderpoel",
  "Ventotla",
  "Vogal",
  "Wagle",
  "Wagner",
  "Wakefield",
  "Weinstein",
  "Weiss",
  "Woo",
  "Yang",
  "Yates",
  "Yocum",
  "Zeaser",
  "Zeller",
  "Ziegler",
  "Bauer",
  "Baxster",
  "Casal",
  "Cataldi",
  "Caswell",
  "Celedon",
  "Chambers",
  "Chapman",
  "Christensen",
  "Darnell",
  "Davidson",
  "Davis",
  "DeLorenzo",
  "Dinkins",
  "Doran",
  "Dugelman",
  "Dugan",
  "Duffman",
  "Eastman",
  "Ferro",
  "Ferry",
  "Fletcher",
  "Fietzer",
  "Hylan",
  "Hydinger",
  "Illingsworth",
  "Ingram",
  "Irwin",
  "Jagtap",
  "Jenson",
  "Johnson",
  "Johnsen",
  "Jones",
  "Jurgenson",
  "Kalleg",
  "Kaskel",
  "Keller",
  "Leisinger",
  "LePage",
  "Lewis",
  "Linde",
  "Lulloff",
  "Maki",
  "Martin",
  "McGinnis",
  "Mills",
  "Moody",
  "Moore",
  "Napier",
  "Nelson",
  "Norquist",
  "Nuttle",
  "Olson",
  "Ostrander",
  "Reamer",
  "Reardon",
  "Reyes",
  "Rice",
  "Ripka",
  "Roberts",
  "Rogers",
  "Root",
  "Sandstrom",
  "Sawyer",
  "Schlicht",
  "Schmitt",
  "Schwager",
  "Schutz",
  "Schuster",
  "Tapia",
  "Thompson",
  "Tiernan",
  "Tisler"

]

我需要每個名字都只問一次。

在此鏈接中是我的項目的副本...

Answer 1

問題是

let nameJuggler = [this.state.sudoNameId % RandomAcidName.length];

this.state.sudoNameId不會是唯一的，因為它只是在父組件中設置的數字，並且將提供給所有不動態更改的AvatarDisplays。 一個簡單的解決方法就是使.map也具有索引，因此您可以將索引添加到this.state.sudoNameId中，這將使每個數字唯一。 見下面的代碼

    return (
      <main className="container__grid">
        {this.state.acidos.map((item, index) => {
            let nameJuggler =
            RandomAcidName[(this.state.sudoNameId + index) % RandomAcidName.length];
          return (
          <AvatarDisplay
            photo={item.acidphoto}
            name={nameJuggler}
            birth={item.birthdate}
            id={item.acidid}
            cumple={
              item.birthdate === fullTodayDate ? (
                <img
                  src="https://via.placeholder.com/40x40"
                  alt="feliz cumpleaños"
                  className="container__position-absolute avatar__birth-date"
                />
              ) : null
            }
          />
        )
        })}
      </main>