javascript - React：将索引传递给孩子并让数组使用这个索引

Question

如果对您更方便，请查找沙盒供您参考。

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

我做了一个Person组件。

在组件中有一个数组，我想将索引从Appto传递Person，它将显示人的姓名和年龄。

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;

在 中App.js，我导入两个Person并传递索引。

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>
  );
}

在我通过的index={0}例子index={3}中Person

我的理想结果应该是：

虹膜：23 岁（指数：0）

埃迪：26岁（指数：3）

但结果是这样的：

埃迪：26 岁（指数：0）

埃迪：26岁（指数：3）

索引确实传递给了，Person但它没有正确显示这个人。

我能做些什么来解决它？谢谢你。

标签： javascriptreactjs

Answer 1

如果我对你的理解正确，你想通过数组映射并用它们的索引打印所有它们，如果这样，那么你这样做的方式是错误的，你必须这样：

//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;

还更新了您的沙盒沙盒