Znajdź piaskownicę, jeśli jest to wygodniejsze dla Ciebie.

https://codesandbox.io/s/mystification-lichterman-k5hh6.

Wykonałem komponent Person.

W komponencie znajduje się tablica i chciałbym przejść indeks z App do Person i pokaże imię i wiek osoby.

function Person(props) {
  const { info, setInfo, index } = props;

  const peopleInfo = {
    members: [
      {
        name: "Iris",
        age: 23
      },
      {
        name: "Bob",
        age: 33
      },
      {
        name: "Ken",
        age: 28
      },
      {
        name: "Eddie",
        age: 26
      }
    ]
  };

  const getInfo = () => {
    setInfo({
      name: peopleInfo.members[index].name,
      age: peopleInfo.members[index].age
    });
  };

  useEffect(() => {
    getInfo();
  }, []);

  return (
    <>
      <div className="card_body">
        <span className="name">{info.name}: </span>
        <span className="age">age {info.age}</span>
        <span> (index: {index})</span>
      </div>
    </>
  );
}

export default Person;

W App.js importuję dwa Person i przejść indeks.

import Person from "./components/Person.js";

function App() {
  const [info, setInfo] = useState({ name: "", age: "" });

  return (
    <div className="App">
      <Person info={info} setInfo={setInfo} index={0} />
      <Person info={info} setInfo={setInfo} index={3} />
    </div>
  );
}

W przykładzie przekazałem index={0} i index={3} do Person

Mój idealny wynik powinien być:

Iris: Wiek 23 (Indeks: 0)

Eddie: Wiek 26 (Indeks: 3)

Ale wynik był taki:

Eddie: Wiek 26 (Indeks: 0)

Eddie: Wiek 26 (Indeks: 3)

Indeks przekazał Person, ale nie pokazuje poprawnie osoby.

Co mogę zrobić, aby to naprawić? Dziękuję Ci.

1
iris-yu17 15 marzec 2021, 05:53

2 odpowiedzi

Najlepsza odpowiedź

Kwestia

Używasz pojedynczego info, że wszystkie elementy Person są aktualizowane po zamontowaniu, więc ostatni komponent Person renderowany i aktualizowany stan jest stanem, który jest przekazany Wstecz do każdego Person i wyświetlany.

Rozwiązanie

Jest trochę niejasny, dlaczego peopleInfo jest w Person i wysłany do składnika macierzystego tylko do zlecenia. Informacje o użytkownika znaleziono przez indeks. Nie ma potrzeby przechowywania żadnych informacji w zmiennej państwowej ani żadnym efektem, aby zaktualizować stan.

function Person(props) {
  const { index } = props;

  const info = peopleInfo.members[index];

  return info ? (
    <div className="card_body">
      <span className="name">{info.name}: </span>
      <span className="age">age {info.age}</span>
      <span> (index: {index})</span>
    </div>
  ) : null;
}

enter image description here

Próbny

Edit react-pass-index-to-children-and-let-the-array-use-this-index

0
Drew Reese 15 marzec 2021, 03:19

Jeśli dobrze cię rozumiem, chcesz mapować przez tablicę i wydrukować je wszystkie indeks, jeśli tak, to sposób, w jaki robisz, jest nie tak, musisz to zrobić:

//Person.js
import React, { useEffect } from "react";

function Person(props) {
  const { name, age, index } = props;

  return (
    <>
      <div className="card_body">
        <span className="name">{name}: </span>
        <span className="age">age {age}</span>
        <span> (index: {index})</span>
      </div>
    </>
  );
}

export default Person;



//App.js
import React, { useState, useEffect } from "react";
import "./styles.css";
import Person from "./components/Person.js";

function App() {
  const peopleInfo = {
    members: [
      {
        name: "Iris",
        age: 23
      },
      {
        name: "Bob",
        age: 33
      },
      {
        name: "Ken",
        age: 28
      },
      {
        name: "Eddie",
        age: 26
      }
    ]
  };

  const [info, setInfo] = useState({ name: "", age: "" });

  return (
    <div className="App">
      {peopleInfo.members.map((person, index) => {
        return <Person {...person} index={index} />;
      })}
    </div>
  );
}

export default App;

Udpated także piaskownik Sandbox

0
webcoder 15 marzec 2021, 03:10