时间戳

首页 > 解决方案 > react native：渲染字符串和数字数组不起作用

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() {
  // let me check, if the data is really there
    Object.entries(this.state.data).map(([key, value]) => {
                console.log("key: ", key, "- value: ", value)
            })
  // output:
  // key: a - value: 48,
  // key: b - value: 2021-03-29T17:11:51Z,
  // key: c - value: ,
  // key:d - value: false

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

    )
}

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

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>
              )
         })}
   )
}

编辑：完整组件：

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-native

解决方案

等待数据被定义，试试这个：

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

编辑：

不要那样变异 this.state.data = response.data，使用 setState：

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

https://reactjs.org/docs/faq-state.html#what-does-setstate-do

推荐阅读