React native react native：呈现字符串和数字数组不'；行不通

在react native应用程序中，我正在从后端检索一些数据，然后希望将其显示给应用程序用户： 当我记录数据时，我可以看到我收到了数据，并将其作为对象正确地存储在状态中：

// console.log("received the data: ", this.state.data) ->
received the data:  Object {      
  "a": 48,
  "b": "2021-03-29T17:11:51Z",
  "c": "",
  "d": false
}

但是，当我试图在视图中呈现时，屏幕只是保持为空（没有错误消息）：

render（）{
//让我检查一下，数据是否真的存在
Object.entries（this.state.data）.map（[key，value]）=>{
log（“key:，key，”-value:，value）
})
//输出：
//键：a-值：48，
//键：b-值：2021-03-29T17:11:51Z，
//键：c-值：，
//关键字：d-值：false
返回(
{Object.entries（this.state.data）.map（[key，value]）=>{
返回{value}
})}
)
}

我也尝试过这个，但仍然收到一个空屏幕：

render() {
    return (
         { this.state.data.map((items, index) => {
              return (
                  <ul key={index}>
                       {Object.keys(items).map((key) => {
                          return (
                             <li key={key + index}>{key}:{items[key]}</li>
                          )
                       })}
                  </ul>
              )
         })}
   )
}

render（）{
返回(
{this.state.data.map（（项，索引）=>{
返回(

{Object.keys（items）.map（（key）=>{
返回(
{key}:{items[key]}
)
})}

)
})}
)
}

编辑：完整组件：

import React from 'react'
import { View, Text } from 'react-native'
import axios from 'axios';

class SuccessScreen extends React.Component {
    baseURL = "https://my-backend-server-URL.com/data"

    state = {
        data: {},
    }

    componentDidMount() {
        this.startGetData();
    }

startGetData = () => {
        
        axios.get(this.baseUrl)
            .then(response => {
                console.log("got the data: ", response.data)
                this.state.data = response.data;
            })
            .catch(function (err) {
                //handle error
                console.log("error getting data: ", err.message)
                return {
                    type: "REGISTER_USER_FAILED",
                    payload: null
                }
            });
    };

    render() {
        console.log("This log will show up")
        return (
            <View>
                {this.state.vehicleData && Object.entries(this.state.vehicleData).map(([key, value]) => {
                    console.log("this log never shows up... key: ", key)   // these logs don't not show up
                    return <View key={key}><Text>{value}</Text></View>
                })}
            </View>

        )
    }
}

export default SuccessScreen;

从“React”导入React
从“react native”导入{View，Text}
从“axios”导入axios；
类SuccessScreen扩展了React.Component{
baseURL=”https://my-backend-server-URL.com/data"
状态={
数据：{}，
}
componentDidMount（）{
this.startGetData（）；
}
startGetData=（）=>{
get（this.baseUrl）
。然后（响应=>{
log（“获取数据：”，response.data）
this.state.data=response.data；
})
.catch（函数（err）{
//处理错误
日志（“获取数据时出错：”，错误消息）
返回{
类型：“注册用户失败”，
有效载荷：空
}
});
};
render（）{
log（“此日志将显示”）
返回(
{this.state.vehicleData&&Object.entries（this.state.vehicleData）.map（[key，value]）=>{
log（“此日志永远不会显示…key:，key）//这些日志不会显示
返回{value}
})}
)
}
}
导出默认成功屏幕；

等待定义数据，尝试以下操作：

return (
    <View>
        {this.state.data && Object.entries(this.state.data).map(([key, value]) => {
            return <View key={key}><Text>{value}</Text></View>
        })}
    </View>

---

在

对象.entries（this.state.data）.map（（[key，value]）=>{

就在您拥有的

返回

之前，检查数据是否在那里。另外，显示您在组件中使用的

导入

是什么。我在return语句之前放了一个console.log，但是日志没有出现在我的日志中……我认为可能无法在那里调用console.log？我在bo中添加了导入ttom现在是我的帖子。是的，你可以，例如：因此数据不在

this.state.data

这就是你的问题。你是否可能以某种方式改变了状态？这会阻止组件在应该的时候重新渲染。假设数据存在，你的渲染方法很好。如果@pmiranda的答案不能解决这个问题，请包括整个组件。等待数据可能是一个好主意。我尝试了这个，但它好像从来没有被调用过。（我现在在帖子中添加了完整的组件）我编辑了我的答案，你没有正确设置状态。我总是忘记设置状态…好了，它现在使用

this.setState（{data:response.data}）；

return (
    <View>
        {this.state.data && Object.entries(this.state.data).map(([key, value]) => {
            return <View key={key}><Text>{value}</Text></View>
        })}
    </View>

 this.setState({ data: response.data });