Javascript 我不断得到[目标]。当我尝试从map函数获取数据时

当我使用normal函数时，地图是正常列出的，但是当我将它放在大括号和美元下面时，

我得到了符号[object]

。 我试着用我的数据做一个道具。我使用星球大战api（SWAPI）

谢谢你的回答

这看起来是这样的：

这是我的代码：

import React from "react";
import Card from "../Card/Card"; 
const CardList = ({ data, valueOfCard, propsdata }) => {
  return (
    <div>
      <div className="card-list">
        {data
          .filter((name) => `${name}.${propsdata}`)
          .slice(0, valueOfCard)
          .map((nameData) => (
            <Card people={`${nameData}.${propsdata}`} /> <-- {nameData.name} work normal
          ))}
      </div>  
      <div></div>
    </div>
  );
};

export default CardList;

从“React”导入React；
从“./Card/Card”导入卡片；
常量卡片列表=（{data，valueOfCard，propsdata}）=>{
返回(
{数据
.filter（（名称）=>`${name}.${propsdata}`）
.切片（0，卡片的值）
.map（（名称数据）=>(
将
[object object]
视为输出文本的原因是javascript提供了javasript对象的默认字符串表示形式

由于在
[object object]
文本后面有一个“.”，我怀疑
nameData
是一个对象，而不是可以解释为字符串的东西

我猜您实际上希望使用特定的
nameData
对象属性，如下所示：

<Card people={`${nameData.someObjectProperty}.${propsdata}`} />

将
[object object]
视为输出文本的原因是javascript提供了javasript对象的默认字符串表示形式

由于在
[object object]
文本后面有一个“.”，我怀疑
nameData
是一个对象，而不是可以解释为字符串的东西

我猜您实际上希望使用特定的
nameData
对象属性，如下所示：

<Card people={`${nameData.someObjectProperty}.${propsdata}`} />

我试图理解您的代码，但它们对我来说毫无意义：


提供给的回调返回字符串而不是布尔值
表达式“${nameData}.${propsdata}”的显示似乎很奇怪

您从来都不清楚希望代码做什么。我只能猜测。我假设：

您正在尝试筛选
数据中的项目
，以获取具有由
propsdata
值命名的属性的项目；以及
您希望“${nameData}.${propsdata}”显示由
propsdata
的值命名的
nameData
属性的数据
这个假设仍然不能解释为什么你的
propsdata
看起来是空的（如果
propsdata
中有
“something”
，输出应该是
“[object object]。something”
，而不是
“[object object]。”
），但至少代码似乎有些道理

如果我的假设是正确的，那么您就严重误解了如何访问javascript对象属性

背景：`
在javascript中，backtick字符用于声明。这是一种字符串，您可以将变量放入其中。此lambda函数：

(name) => `${name}.${propsdata}`

与以下内容相同：

function (name) {
  return "" + name + "." + propsdata;
}

Javascript解释器会首先尝试将
name
和
propsdata
转换为字符串，然后使用“.”将它们合并。在您的情况下，
name
显然是一个对象，
propsdata
似乎是一个空字符串。将对象转换为字符串将为
“[对象对象对象]”
。此模板文本将被计算为字符串
“[object object]”。
，该字符串在筛选时始终为
true

如何按属性键进行筛选？
要检查对象是否有键，可以使用。例如：

data.hasOwnProperty（“somekey”）；

假设您只需要具有由变量
propname
动态指定的键的数据，您可以执行如下筛选：

数据
.filter（（name）=>name.hasOwnProperty（propname））

如何访问对象属性？
如果您有一个对象
myobj
，并且希望访问其名为
的属性“someprop”
，javascript中有两种语法：

myobj.someprop

及

myobj[“someprop”]

第二种语法样式允许您通过另一个变量的值指定属性。因此，您可以执行以下操作：

var myobj={foo:“bar”}；
var keyname=“foo”；
log（foo[keyname]）；
//控制台中的结果：bar

如何修复代码？
如果我的假设是正确的，那么您可能正在寻找这样的东西：

从“React”导入React；
从“./Card/Card”导入卡片；
const CardList=（{data，valueOfCard，propsdata=“name”}）=>{
返回(
{数据
.filter（（nameData）=>nameData.hasOwnProperty（propsdata））
.切片（0，卡片的值）
.map（（名称数据）=>(
))}
);
};
导出默认卡片列表；

这对我来说仍然没有多大意义（为什么在名为“character”的卡片中显示任意属性），但它比您演示的代码更有意义

如果这不是您想要做的，我的另一个猜测是您想要按名称筛选字符（名称存储在
propsdata
）。在这种情况下：

从“React”导入React；
从“./Card/Card”导入卡片；
常量卡片列表=（{data，valueOfCard，propsdata}）=>{
返回(
{数据
.filter（（characterData）=>（propsdata==“”| | characterData.name==propsdata））
.切片（0，卡片的值）
.map（（名称数据）=>(
))}
);
};
导出默认卡片列表；

表达式
（propsdata==“”| | characterData.name===propsdata）
将允许每个字符通过，如果
propsdata
是空字符串。
我试图理解您的代码，但它们对我来说毫无意义：


提供给的回调返回字符串而不是布尔值
表达式“${nameData}.${propsdata}”的显示似乎很奇怪

你从来都不清楚你想让你的代码做什么。我只能猜测。我也是