Question

我正在尝试实现此功能-当用户单击左侧的字符时，该字符的统计信息将显示在右侧。

当前，我最初在App.js中使用State获取所有字符信息。每个字符都是一个对象，位于一个大数组中。

在/components/content.js中，我正在映射字符并将它们返回到屏幕。这显示了一切。

我只想显示每个特定角色的统计信息，并且仅当用户单击左侧的特定按钮时显示。

有什么想法吗？谢谢您的帮助！

更新的代码：

import React, { Component } from 'react';
import Intro from '../intro/intro';

class Content extends Component {
render() {

// Grab the 'characters' object from App.js, and assign it to 'this.props'
const { characters } = this.props;

// Filter the chracters and return only whose 'id' belongs to that of '6'
const filteredCharacters = characters.filter(characters => {
  if (characters.id === 6) {
    return (
      <div className="characters">
        <p>Name: {characters.Name}</p>
        <p>ID: {characters.id}</p>
        <p>Job: {characters.Job}</p>
        <p>Age: {characters.Age}</p>
        <p>Weapon: {characters.Weapon}</p>
        <p>Height: {characters.Height}</p>
        <p>Birthdate: {characters.Birthdate}</p>
        <p>Birthplace: {characters.Birthplace}</p>
        <p>Bloodtype: {characters.Bloodtype}</p>
        <p>Description: {characters.Description}</p>
      </div>
    )
  }
});

// Check to see if it logs properly (it does)
console.log(filteredCharacters);

return (
  <div>
    <section className="content">
      {filteredCharacters}
      {/* <Intro
        title="Final Fantasy 7 Character Stats App"
        text="Search and discover the stats for the main characters of the Final Fantasy 7.">
      </Intro> */}
    </section>
  </div>
)
}
}

export default Content;

Answer 1

在数组中选择一个特定对象意味着为该对象过滤数组。我建议使用find()，它类似于filter方法，除了只返回一个结果。

您必须根据对象的特征来决定如何过滤数组。

{
    Name: "Cloud Strife",
    Job: "Mercenary",
    Age: 21,
    Weapon: "Sword",
    Height: `5'7`,
    Birthdate: "August 19",
    Birthplace: "Nibelheim",
    Bloodtype: "AB",
    Description: `something something`
  }

您的大多数字段都是唯一的，因此您几乎可以使用任何字段。但是，它们偶然是唯一的，您可以得到两个具有相同高度或名称的字符。我建议添加一个始终唯一的新密钥。最简单的方法是给它创建日期的时间戳。

我还建议创建状态为selectedCharacter的新字段，然后在on click处理程序中获取数组并将其过滤为单击的字符charactersArray.find(character => chacter.id === selected.id)。 selected.id来自将您单击的字符的对象传递到onClick处理程序中的地方。

然后您在单个字符组件而不是整个数组中引用selectedCharacter的状态值，这将始终显示最后一次单击的字符。

Answer 2

在这里，用以下内容替换Content类组件：

  const Content = ({ characters }) => {

  // pick out the character you want by id
  const character = characters.find(character => character.id === 6);

  return (
    <div className="characters" key={character.id}>
      <p>Name: {character.Name}</p>
      <p>ID: {character.id}</p>
      <p>Job: {character.Job}</p>
      <p>Age: {character.Age}</p>
      <p>Weapon: {character.Weapon}</p>
      <p>Height: {character.Height}</p>
      <p>Birthdate: {character.Birthdate}</p>
      <p>Birthplace: {character.Birthplace}</p>
      <p>Bloodtype: {character.Bloodtype}</p>
      <p>Description: {character.Description}</p>
    </div>
  );
};

我使用find（）而不是filter（），因为filter会映射到整个数组，而find会在找到所需结果时停止。否则，它是完全一样的，当您只想要一个结果时，它才是更好的选择。

由于您没有使用任何类生命周期方法，因此我也从类组件切换为无状态功能组件。

您确实想传递选择的ID，而不是对其进行硬编码，但我没有更改它，以减少混乱。

如何在React中的数组onClick中显示特定对象？

2 个答案: