映射 JSON - 反应

Question

可以通过 React 以下面的格式映射 JSON 吗？

我试过像这样映射数据，但数据没有出现：

反应代码：

import data234 from "./realdata-api.json"
import { Fragment } from "react";

const [contacts, setContact] = useState(data234)

{contacts.map((contact) => (
               <Fragment>
                            <h1>{contact.stage}</h1>
                            <h1>{contact.stage}</h1>
                            </Fragment>
 ))}

JSON：

[{
    "word_tracker": {
        "words_tracked": 0,
        "words_used": 1,
        "amount_allowed": 5,
        "title_allowed": 1
    },
    "current_data": [
        {
            "stage": "TCX",
            "cycle": "switch",
            "cycle_period": "2021-07-30",
            "period_end": "2021-08-26",
            "days_into_cycle": 10,
            "days_into_route": 11
        }
    ]
}]

数据是否因为标头而没有映射？特别是'words_tracker'和'current_data'？？

请问有人知道如何用这种格式的 JSON 映射数据吗？

Answer 1

是的，它很容易做到。

你需要像这样改变它

<>
  {contacts.map((contact) => (
        <Fragment key={contact.current_data[0].stage}>
          <h1>{contact.current_data[0].stage}</h1>
          <h1>{contact.current_data[0].stage}</h1>
        </Fragment>
  ))}
</>

或者改为通过您的current_data 映射，这取决于您的需求和 JSON 结构。