为什么访问对象中的字段返回 undefined，但在打印对象时存在？

问：

我有一份幸存者名单：

const survivorsList = [
  {
    id: 1,
    name: "Ace Visconti",
    image_path: "static/survivors/ace_visconti.jpg",
  },
  {
    id: 2,
    name: "Vittorio Toscano",
    image_path: "static/survivors/vittorio_toscano.jpg",
  },
  {
    id: 3,
    name: "Nancy Wheeler",
    image_path: "static/survivors/nancy_wheeler.jpg",
  },
  {
    id: 4,
    name: "Claudette Morel",
    image_path: "static/survivors/claudette_morel.jpg",
  },
];

我正在尝试在我的应用程序中访问渲染函数中的列表：

  renderSurvivorName = () => {

    const randomSurvivor = this.state.survivorsList.filter(
        (survivor) => survivor.name === "Ace Visconti"
    );

    console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
    console.log("Survivor Name: " + randomSurvivor.name);

    // return randomSurvivor['name'];
    return randomSurvivor.name;
  };

当我查看控制台时，我看到：

Random Survivor: [{"id":1,"name":"AceVisconti","image_path":"static/survivors/ace_visconti.jpg"}]. App.js:62
Survivor Name: undefined. App.js:63

React 应用程序的完整代码很简单，如果万一它很重要：

import React, { Component } from "react";

const survivorsList = [
  {
    id: 1,
    name: "Ace Visconti",
    image_path: "static/survivors/ace_visconti.jpg",
  },
  {
    id: 2,
    name: "Vittorio Toscano",
    image_path: "static/survivors/vittorio_toscano.jpg",
  },
  {
    id: 3,
    name: "Nancy Wheeler",
    image_path: "static/survivors/nancy_wheeler.jpg",
  },
  {
    id: 4,
    name: "Claudette Morel",
    image_path: "static/survivors/claudette_morel.jpg",
  },
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      survivorsList: survivorsList,
      survivorName: "Ace Visconti"
    };
  }

  // displayRandom = (status) => {
  //   if (status) {
  //     return this.setState({ randomCalculated: true });
  //   }
  //
  //   return this.setState({ randomCalculated: false });
  // };

  renderSurvivorTitle = () => {
    return (
        <div className="nav nav-tabs">
        <span
            className={this.state.randomCalculated ? "nav-link active" : "nav-link"}
            onClick={() => this.displayRandom(true)}
        >
          Survivor
        </span>
        </div>
    );
  };

  renderSurvivorName = () => {

    const randomSurvivor = this.state.survivorsList.filter(
        (survivor) => survivor.name === "Ace Visconti"
    );

    console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
    console.log("Survivor Name: " + randomSurvivor.name);

    // return randomSurvivor['name'];
    return <div>Survivor: {this.state.survivorName}</div>;
  };

  render() {
    return (
        <main className="container">
          <h1 className="text-white text-uppercase text-center my-4">Todo app</h1>
          <div className="row">
            <div className="col-md-6 col-sm-10 mx-auto p-0">
              <div className="card p-3">
                <div className="mb-4">
                  <button
                      className="btn btn-primary"
                  >
                    Select Random Survivor
                  </button>
                </div>
                <div>{this.renderSurvivorTitle()}</div>
                <div>{this.renderSurvivorName()}</div>
                {/*<div>{"Ace Visconti"}</div>*/}
              </div>
            </div>
          </div>
        </main>
    );
  }
}

export default App;

我正在使用最新的react，正如你从我的package.json中看到的那样：

{
  "name": "dbd-randomizer-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "latest",
    "@testing-library/react": "latest",
    "@testing-library/user-event": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "web-vitals": "latest",
    "bootstrap": "latest",
    "reactstrap": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如您所见，我尝试使用点表示法和 [] 表示法访问该字段。我看不出该字段是如何不设置的。这两个调用之间的范围是否有可能更改？是否在调用之间重新加载页面并且未设置值？

我找到了这篇 stackoverlow 文章。但是由于我还没有进行 api 调用，我认为我不需要异步。我错了吗？