在中使用.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

我真的很感激任何帮助。 所以该项目是一个反应项目。

这是我获取的内容：获取请求

这是我从服务器响应的内容： Response from server

我试了一下 Postman，看看我收到的是什么类型的 json。 这是它返回的内容： Postman 测试

我遇到的问题是我无法 map 收到的数据。 一旦输入链接，我只想在首页上以一种很好的方式显示接收到的数据。

是否可以将 map 放在 div 标签内？ 或者还有另一种方法吗？

请注意该项目是作为功能组件编写的

Answer 1

这就是您的组件的外观

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

Answer 2

我硬编码了 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

这是一个伪代码，我没有测试它，但它看起来类似于：

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

因为，您接收到要显示的对象数组，您可以使用数组方法map创建一个 div 列表，如下所示：

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

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