如何在数组 object 中渲染这个数组

Question

Hi I want to render this Advice on the screen but I could not do it I tried to map but that didn't helped please help me

 import React, { useState, useEffect } from 'react' export default function UsersData() { const [Users, setUsers] = useState([{ "slip": { "id": 41, "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs." } }]) return( <> <h2> React Fetch API Example </h2> <ul> {/* Not sure what to write here */} </ul> </> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I tried {Users.map(e=>{e.slip}) but it didn't work.

Answer 1

It should be as simple as writing a mapping function:

export default function UsersData() {
  const [Users, setUsers] = useState([
    {
      slip: {
        id: 41,
        advice:
          "Don't use Excel or Powerpoint documents for your basic word processing needs.",
      },
    },
  ]);

  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map((user) => (
          <li key={user.slip.id}>{user.slip.advice}</li>
        ))}
      </ul>
    </>
  );
}

Here's a sample for your ref.

Answer 2

Using map function you can print whole array and sample code below here.

<ul>
    {Users.map((element) => (
      <li key={element.slip.id}>{element.slip.advice}</li>
    ))}
  </ul>

Answer 3

Use this:

import React, { useState, useEffect } from 'react'

export default function UsersData() {
  const [Users, setUsers] = useState([
    {

      "slip": {
      "id": 41,
      "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs."
      }
      }
  ])



  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map(({slip})=>(
           <li key={slip.id}>{slip.advice}</li>
        ))}
      
      </ul>
    </>
  )
}

Answer 4

<h2>React Fetch API Example</h2>
    <ul>
      {Users.map((user) =>
        Object.keys(user).map((key) => (
          <li>
            {user[key].id} - {user[key].advice}
          </li>
        ))
      )}
    </ul>