Javascript 如何在React Native中以状态存储JSON项

我对react native有些困惑，我希望社区能帮我澄清。我试图从一个API接收一些公告的列表，并在一个平面列表中显示每个公告

我可以接收和解析JSON，我可以显示以状态编码的项目，但是我在以状态存储JSON数据时遇到了问题

所以问题是：如何将从API接收的JSON数据存储在react native中

这是我的代码（我试着删减了，里面可能有一些jank，很抱歉）

---

您应该使用

useState

将状态存储在函数组件中：

您的

fetch

调用应该在

useffect

中完成——否则，它将在每个渲染中发生：

内部

函数公告屏幕（道具）{

：

const [data, setData] = useState();
useEffect(() => {
  fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
    method: 'GET',
    headers: {
        // Accept: 'application/json',
        'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
        'Content-Type': 'application/json',
    },       
})
.then((response) => response.json())
.then((responseJson) => {
    setData(responseJson)
})
.catch((error) => {
    console.error(error);
});
},[]);

---

然后，您可以通过在视图层次结构中使用

数据

来访问设置的状态。因为您要返回的JSON与您现在使用的测试状态有很大不同，所以您需要以不同的方式构建

公告

组件和/或道具，但这应该让您开始至少要存储状态。

如果应用上述代码时仍然出现错误，请尝试在useState（[]）中包含[]。

Object {
  "0": Array [
    "11001",
    "1",
    "Test Announcement",
    "This is a test announcement to prove that the database works",
    "2021-03-18 19:30:00",
  ],
  "1": Array [
    "01001",
    "2",
    "Lost socks",
    "I have lost my favorite socks. If you find them, please let me know",
    "2021-03-22 10:30:00",
  ],
  "2": Array [
    "10101",
    "3",
    "Found Socks",
    "Please disreguard the previous statement. I found my missing socks.",
    "2021-03-18 19:30:00",
  ],
  "3": Array [
    "01101",
    "4",
    "TestAnno",
    "Something or other",
    "2021-01-20 11:20:00",
  ],
  "4": Array [
    "11100",
    "5",
    "asdfasdfsadfasfd",
    "asdfasdfasdfsadf",
    "2021-04-21 15:38:44",
  ],
}

const [data, setData] = useState();
useEffect(() => {
  fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
    method: 'GET',
    headers: {
        // Accept: 'application/json',
        'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
        'Content-Type': 'application/json',
    },       
})
.then((response) => response.json())
.then((responseJson) => {
    setData(responseJson)
})
.catch((error) => {
    console.error(error);
});
},[]);