你可以这样做。基本上跟踪整个人。并根据人数（即0，1）更新相应的按钮值：

import React,{useState} from "react";
import "./style.css";

const initialState = [
  {
    person: "Ela",
    age: 48
  },
  {
    person: "Natalia",
    age: 28
  }
];

const green = "#39D1B4";
const yellow = "#FFD712";

function Person({ person, onClick, color, index }) {
  return (
    <>
      <h3>My name is {person.person}</h3>
      <h3>My age is {person.age}</h3>
      <button
        style={{ backgroundColor: color }}
        color={color}
        name={person.person}
        onClick={onClick}
        index={index}
      >
        Change color
      </button>
      {index}
    </>
  );
}

export default function App() {
  const [person, setPerson] = useState(initialState);
  const [buttonColor, setButtonColor] = useState({0:green,1:green});

  function handleColorChange(e,i) {
    console.log(i)
    const button = e.target.style.backgroundColor;
    const newButton = e.target.style.backgroundColor;

    const newColor = buttonColor[i] === green ? yellow : green;
    const newState ={...buttonColor,[i]:newColor}
    setButtonColor(newState);
  }

  return (
    <div className="App">
      {person.map((per, i) => {
        return (
          <Person
            color={buttonColor[i]}
            key={i}
            index={i}
            onClick={(e) => handleColorChange(e,i)}
            person={per}
          />
        );
      })}
    </div>
  );
}

下面是demo：https://stackblitz.com/edit/react-3ca52l

您应该将更改背景颜色的逻辑移动到Person组件。因此，每个按钮都有自己的状态和颜色值。
因为现在你把按钮的颜色存储在父组件中，并与所有的子组件共享它，这就是为什么当一个子组件改变颜色时，另一个子组件也会收到这个改变。

只需将handleColorChange方法和buttonColor状态移动到Person组件中，这样颜色更改只会影响每个按钮本身，如下所示;

App.js

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

const initialState = [
  {
    person: "Ela",
    age: 48
  },
  {
    person: "Natalia",
    age: 28
  }
];

export default function App() {
  const [person, setPerson] = useState(initialState);

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

Person.js

import React, { useState } from "react";

export default function Person({ person, onClick, color, index }) {
  let green = "#39D1B4";
  let yellow = "#FFD712";

  const [buttonColor, setButtonColor] = useState(green);

  function handleColorChange(e) {
    const button = e.target.style.backgroundColor;
    const newButton = e.target.style.backgroundColor;

    const newColor = buttonColor === green ? yellow : green;
    setButtonColor(newColor);
  }

  return (
    <>
      <h3>My name is {person.person}</h3>
      <h3>My age is {person.age}</h3>
      <button
        style={{ backgroundColor: buttonColor }}
        color={buttonColor}
        name={person.person}
        onClick={handleColorChange}
        index={index}
      >
        Change color
      </button>
      {index}
    </>
  );
}

工作示例over here

设置您的新颜色为您的按钮不状态。

const newColor = buttonColor === green ? yellow : green;
e.target.style.backgroundColor = newColor;

setState调用render，所有按钮都从state获取颜色。
或者你必须在你的 Person 中有颜色 prop ，并在事件中改变颜色。（Than元素必须从Person获取颜色）