我不断收到 [object Object]。 当我尝试从 map 函数获取数据时

Question

when I put the normal function the map is listed normally, but as soon as I put it under the curly braces and the dollar, I get the sign [object object] . I try to make a drill props my data. And i use star wars api (SWAPI)!

Thank you for answer!

This is how look like:

This is my code:

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;

Answer 1

The reason you're seeing [object Object] as output text is that the javascript is providing the default string representation of a javasript object.

Since there is a "." just after the [object Object] text, I suspect that nameData is an object instead of something that can actually be interpreted as a string.

I am guessing that you're actually looking to use a specific nameData object property like the following:

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

To illustrate what's happening, you can run the following in a javascript debug console:

var a = {};
console.log(`${a}`);

Answer 2

I tried to understand your code but they make no sense to me:

• The callback you supplied to Array.prototype.filter returns a string instead of boolean.
• The expression `${nameData}.${propsdata}` seems like a strange thing to display.

You were never clear about what you want your code to do. I can only guess. I assume:

1. You're trying to filter the items in data to get the one that has a property named by the value of propsdata ; and
2. You're expecting `${nameData}.${propsdata}` to show the data of property of nameData named by the value of propsdata .

This assumption still doesn't explain why your propsdata apperantly clear empty (if propsdata has "something" in it, the output should be "[object Object].something" instead of "[object Object]." ), but at least the code seem to make some sense.

If my assumptions were right, then you are seriously misunderstanding how to access javascript object property.

The backtick: `

In javascript, the backtick character is used to declare Template literals . That is a kind of string that you may put variables in it. This lambda function:

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

is identical to:

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

Javascript interpreters would try to turn both name and propsdata into string first, then concat them with ".". In your case, name is obviously an object and propsdata seems to be an empty string. Turning an object into string will give you "[object Object]" . This template literal will be evaluated into string "[object Object]." , which is always true for filtering.

How to filter by property key?

To check if an object has a key, you can use Object.prototype.hasOwnProperty . For example:

data.hasOwnProperty("somekey");

Assuming you want only data that has a key dynamically specified by variable propname , you may do a filter like this:

data
  .filter((name) => name.hasOwnProperty(propname))

How to access an object property?

If you have an object myobj and you want to access its property named "someprop" , there are 2 types of syntax in javascript:

myobj.someprop

and

myobj["someprop"]

The second syntax style allow you to specify a property by the value of another variable. So you can do this:

var myobj = {foo: "bar"};
var keyname = "foo";

console.log(foo[keyname]);
// result in console: bar

How to fix the code?

If my assumptions are correct, you are probably looking for something like this:

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

export default CardList;

Which still doesn't make much sense to me (why show arbitrary property in a card titled "character"?), but it makes more sense than the code you demonstrated.

If this is not what you wanted to do, my other guess was that you want to filter character by name (and the name is stored in propsdata ). In that case:

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

export default CardList;

The expression (propsdata === "" || characterData.name === propsdata) would allow every character to pass if propsdata is an empty string.