在中使用.map<div> 标签-react.js</div><div id="text_translate"><p> 我真的很感激任何帮助。 所以该项目是一个反应项目。</p><p> 这是我获取<a href="https://i.stack.imgur.com/WelCP.png" rel="nofollow noreferrer">的内容：获取请求</a></p><p>这是我从服务器响应的内容： <a href="https://i.stack.imgur.com/e2QG3.png" rel="nofollow noreferrer">Response from server</a></p><p> 我试了一下 Postman，看看我收到的是什么类型的 json。 这是它返回的内容： <a href="https://i.stack.imgur.com/yg6IE.png" rel="nofollow noreferrer">Postman 测试</a></p><p>我遇到的问题是我无法 map 收到的数据。 一旦输入链接，我只想在首页上以一种很好的方式显示接收到的数据。</p><p> 是否可以将 map 放在 div 标签内？ 或者还有另一种方法吗？</p><p> <em><strong>请注意该项目是作为功能组件编写的</strong></em></p></div>

Question

I would really appreciate any help. So the project is a react project.

Here is what I fetch: fetching a request

Here is what I respond from server: Response from server

I tried on Postman to see what type of json I am receiving. Here is what it returns: Postman test

The problem I am having is that I am unable to map the data received. I want to just show the received data in a nice way on front page once the link is entered.

Is it possible to map it inside div tag? Or is there another way of doing it?

Please note the the project is written as functional component

Answer 1

This is how your component will look

 export default function App() { let data = [{ number: "1", other: "some data" }]; return ( <div> {data.map(item => ( <div>{item.other}</div> ))} </div> ); }

Answer 2

I hardcoded the data outside the function

 import React from 'react' const data = [{ number: "1. ", other: "some data" }]; const SomeData = () => { return ( <div> {data.map(list => ( <li>{list.number}{data.map(item => ( <span>{item.other}</span> ))}</li> ))} </div> ) } export default SomeData

Answer 3

This is a pseudo code, I did not test it, but it will look similar to this:

const MyComponent = () => {
    // the data you retrieved from server
    const data = [
      { number: 1, date: 'today', startTime: '09:00', endTime: '00:00'},
      { number: 12, date: 'today', startTime: '08:00', endTime: '00:00'},
    ]
    
    return(
      data.map(item => (
        <div>{item.number}</div>
      ))
    )
    }

Answer 4

Since, you receive array of objects that you want to display, you can use the array method map to create a list of divs like this:

function createDOM() {
    return data.map(dataItem => {
        <div>
            // Code to display your data
        </div>
    });
}

return (
    <div>
        {createDOM()}
    </div>
)