在React JS中显示结果为 [object Object], [object Object]

huangapple
go评论104阅读模式
英文:

Result showing [object Object], [object Object] in React JS

问题

当我点击删除按钮时，会出现一个提示。提示正常工作，但不知何故显示了奇怪的 [object Object], [object Object]。我希望当提示出现时，它引用对象中的 name。例如，当我点击删除按钮时，提示将在浏览器上显示如下：

你确定要删除 jabss 吗？

但现在它显示为：

你确定要删除 [object Object],[object Object],[object Object],[object Object] 吗？

这是删除按钮的逻辑和它在代码中的使用方式。我该如何修复这个问题？

  1. const handleDelete = (id) => {
  2.     const newPerson = persons.filter((person) => person.id !== id)
  4.     if (window.confirm(`你确定要删除 ${newPerson} 吗？`)) {
  5.         personService
  6.             .delete(id)
  7.         setPersons(newPerson)
  8.     }
  9. }

它在 Person 组件下面使用，如下：

  1. <ul>
  2.     {persons.filter((person) => {
  3.         if (searchTerm === "") {
  4.             return person
  5.         } else if (person.name.toLowerCase().includes(searchTerm.toLowerCase())) {
  6.             return person
  7.         }
  8.     }).map((person, id) => {
  9.         return (
  10.             <Person key={person.id} person={person} deleteButton={() => handleDelete(person.id)} text='删除' />
  11.         );
  12.     })}
  13. </ul>

数据存储在 db.json 中，如下：

  1. {
  2.     "persons": [
  3.         {
  4.             "name": "Arto Hellas",
  5.             "number": "040-123456",
  6.             "id": 1
  7.         },
  8.         {
  9.             "name": "Ada Lovelace",
  10.             "number": "39-44-5323523",
  11.             "id": 2
  12.         },
  13.         {
  14.             "name": "jabss",
  15.             "number": "21321312321",
  16.             "id": 4
  17.         },
  18.         {
  19.             "name": "kamal",
  20.             "number": "231321321321",
  21.             "id": 5
  22.         },
  23.         {
  24.             "name": "jabri juhinin",
  25.             "number": "321321321321",
  26.             "id": 6
  27.         }
  28.     ]
  29. }
英文:

When I click a delete button, a prompt will come up. The prompt works well but somehow it is displaying a weird [object Object], [object Object]. I want it to be such that, when the prompt comes up it refers to the name in the object. For example, when I click the delete button, the prompt will come up on browser like this,

Do you want to delete jabss ?

But now it is showing,

Do you want to delete [object Object],[object Object],[object Object],[object Object] ?

Here is the delete function button logic and where it is used in the code. How can I fix this ?

  1. const handleDelete = (id) =&gt; {
  2.     const newPerson = persons.filter((person) =&gt; person.id !== id)
  4.     if (window.confirm(`Do you want to delete ${newPerson} ?`)) {
  5.       personService
  6.         .delete(id)
  7.         setPersons(newPerson)
  8.     }
  9.   }

It is used below in the Person component,

  1.     &lt;ul&gt;
  2.           {persons.filter((person) =&gt; {
  3.             if (searchTerm === &quot;&quot;) {
  4.             return person
  5.           } else if (person.name.toLowerCase().includes(searchTerm.toLowerCase())) {
  6.             return person
  7.           }
  8.           }).map((person, id) =&gt; {
  9.             return (
  10.             &lt;Person key={person.id} person={person}  deleteButton={()=&gt;handleDelete(person.id)} text=&#39;Delete&#39; /&gt;
  11.           );
  12.           })
  13.           }
  14.    &lt;/ul&gt;

db.json where the data is stored,

  1. {
  2.   &quot;persons&quot;: [
  3.     {
  4.       &quot;name&quot;: &quot;Arto Hellas&quot;,
  5.       &quot;number&quot;: &quot;040-123456&quot;,
  6.       &quot;id&quot;: 1
  7.     },
  8.     {
  9.       &quot;name&quot;: &quot;Ada Lovelace&quot;,
  10.       &quot;number&quot;: &quot;39-44-5323523&quot;,
  11.       &quot;id&quot;: 2
  12.     },
  13.     {
  14.       &quot;name&quot;: &quot;jabss&quot;,
  15.       &quot;number&quot;: &quot;21321312321&quot;,
  16.       &quot;id&quot;: 4
  17.     },
  18.     {
  19.       &quot;name&quot;: &quot;kamal&quot;,
  20.       &quot;number&quot;: &quot;231321321321&quot;,
  21.       &quot;id&quot;: 5
  22.     },
  23.     {
  24.       &quot;name&quot;: &quot;jabri juhinin&quot;,
  25.       &quot;number&quot;: &quot;321321321321&quot;,
  26.       &quot;id&quot;: 6
  27.     }
  28.   ]
  29. }

答案1

得分: 1

你需要使用 find 方法来返回单个记录，而不是使用 filter 方法，后者返回一个数组，然后获取 name 属性。

  1. const handleDelete = (id) => {
  2.     const newPersons = persons.filter((person) => person.id !== id);
  3.     const newPerson = newPersons?.[0];
  4.     const newPersonName = newPerson?.name;
  5.     if (newPersonName && window.confirm(`Do you want to delete ${newPersonName} ?`)) {
  6.         personService.delete(id);
  7.         setPersons(newPersons);
  8.     }
  9. }
英文:

You need to use find method to return just single record instead of filter method which returns array, then get the name property.

  1. const handleDelete = (id) =&gt; {
  2.     const newPersons = persons.filter((person) =&gt; person.id !== id)
  3.     const newPersonName = newPersons?.[0]?.name
  4.     if (newPersonName &amp;&amp; window.confirm(`Do you want to delete ${newPersonName} ?`)) {
  5.       personService
  6.         .delete(id)
  7.         setPersons(newPersons)
  8.     }
  9.   }

答案2

得分: 0

Step 1: 修复过滤逻辑

const newPerson = persons.filter((person) =&gt; person.id !== id) 应该改为 const newPerson = persons.filter((person) =&gt; person.id === id)。

Step 2: 使用 find 而不是 filter，以获取一个结果而不是结果数组。

  1. const newPerson = persons.find((person) =&gt; person.id === id)

Step 3: 在字符串中显示人的名字，而不是整个人对象。

  1. if (window.confirm(`您是否要删除 ${newPerson.name} ?`)) {
英文:

Step 1: fix the filter logic

const newPerson = persons.filter((person) =&gt; person.id !== id) should be const newPerson = persons.filter((person) =&gt; person.id === id).

Step 2: use find and not filter, to get 1 result and not an array of results.

  1. const newPerson = persons.find((person) =&gt; person.id === id)

step 3: display the persons name, not the entire person object, in your string.

  1. if (window.confirm(`Do you want to delete ${newPerson.name} ?`)) {

答案3

得分: 0

  1. const handleDelete = (id) => {
  2.   const newPersons = persons.filter((person) => person.id !== id);
  3.   const personToDelete = persons.find((person) => person.id === id);
  5.   if (window.confirm(`是否要删除 ${personToDelete.name} ?`)) {
  6.     personService.delete(id);
  7.     setPersons(newPersons);
  8.   }
  9. }
英文:

Something like this would work.

  1. const handleDelete = (id) =&gt; {
  2. const newPersons = persons.filter((person) =&gt; person.id !== id);
  3. const personToDelete = persons.find((person) =&gt; person.id === id);
  5. if (window.confirm(`Do you want to delete ${personToDelete.name} ?`)) {
  6.   personService
  7.     .delete(id)
  8.     setPersons(newPersons)
  9. }
  10. }

答案4

得分: 0

  1. 你可以在不需要执行单独的`.find`或额外的`.filter`的情况下，一次性保存要删除的人。
  3. const handleDelete = (id) => {
  4.     let personToDelete;
  5.     const newPersons = persons.filter((person) => {
  6.         if (person.id === id) {
  7.             personToDelete = person;
  8.             return false; // 返回并不是必需的，但看起来更酷
  9.         }
  10.         return person.id !== id;
  11.     })
  13.     if (window.confirm(`你确定要删除 ${personToDelete.name} 吗？`)) {
  14.         personService
  15.             .delete(id)
  16.             setPersons(newPersons)
  17.     }
  18. }
英文:

you can save the person to delete temporary all at once without doing a separate .find or an extra .filter

  1. const handleDelete = (id) =&gt; {
  2.     let personToDelete;
  3.     const newPersons = persons.filter((person) =&gt; {
  4.      if (person.id === id) {
  5.        personToDelete = person;
  6.        return false; // return is not necessary but looks cooler
  7.      }
  8.      return person.id !== id
  9.     })
  11.     if (window.confirm(`Do you want to delete ${personToDelete.name} ?`)) {
  12.       personService
  13.         .delete(id)
  14.         setPersons(newPersons)
  15.     }
  16.   }

答案5

得分: 0

我认为不需要再次查找已删除的人。
您可以直接将Person对象作为参数传递。

  1. <Person key={person.id} person={person} deleteButton={() => handleDelete(person)} text='Delete' />
  1. const handleDelete = (person) => {
  2.   const newPerson = persons.filter((person) => person.id !== id);
  3.   if (window.confirm(`Do you want to delete ${person.name} ?`)) {
  4.     personService.delete(person.id);
  5.     setPersons(newPerson);
  6.   }
  7. }
英文:

I think. there's no need to find deletedPerson again.
You can simply pass Person object as a parameter.

  1. &lt;Person key={person.id} person={person}  deleteButton={()=&gt;handleDelete(person)} text=&#39;Delete&#39; /&gt;
  3. const handleDelete = (person) =&gt; {
  4. const newPerson = persons.filter((person) =&gt; person.id !== id)
  5. if (window.confirm(`Do you want to delete ${person.name} ?`)) {
  6.   personService
  7.     .delete(person.id)
  8.     setPersons(newPerson )
  9. }

}

huangapple
  • 本文由 发表于 2023年2月23日 20:18:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/75544742.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定