expo React-native 数据未呈现但登录控制台

Posted 2023-02-19

【中文标题】expo React-native 数据未呈现但登录控制台

【英文标题】：expo React-native data not rendering but logs in console

【发布时间】：2021-05-19 18:48:27

【问题描述】：

我正在从 API 获取数据，它工作正常，使用 react-native 和 expo 我正在使用 redux，它正在使用单个减速器工作文件，但是当我使用组合减速器时，它会停止渲染，但仍然能够在控制台中记录所有数据，我不确定我做错了什么我已经面临这个问题好几天了。 我试过了：

重新安装 expo 升级博览会 重新创建新项目 我已经搜索了互联网，但我找不到任何解决方案

减速器

import 
  PRODUCT_DETAILS_REQUEST,
  PRODUCT_DETAILS_SUCCESS,
  PRODUCT_DETAILS_FAIL,
 from "../../../constants";

const initialState = [];

const productDetailsReducer = (state = initialState, action) => 
  switch (action.type) 
case PRODUCT_DETAILS_REQUEST:
  return  loading: true ;
case PRODUCT_DETAILS_SUCCESS:
  return  loading: false, product: action.payload ;
case PRODUCT_DETAILS_FAIL:
  return  loading: false, error: action.payload ;
default:
  return state;
  
;

export default productDetailsReducer;

组件

import React,  useEffect  from 'react'
import  StyleSheet, ScrollView, Linking, Text, View, Image  from "react-native";
import  Card, Button  from "react-native-elements";
import  useSelector, useDispatch  from 'react-redux'

import  getProduct  from '../Redux/actions/products.Action.js'

export const Product = ( route ) => 
    const  itemId  = route.params;
    // 376
    const dispatch = useDispatch()

    const storeState = useSelector((state) => state.productDetailsReducer);
    const product, loading, error = storeState;


    const printdata = () => 
        console.log(product.name);
    

    useEffect(() => 
        dispatch(getProduct(itemId));
    , [dispatch]);


    return (
        <>
            <Text> loading ? "loading" : product.name</Text>
            <Button onPress=() =>  printdata() >press</Button>
        </>
    )

export default Product

错误

状态

【问题讨论】：

选择器中的状态是什么？你能看到哪些动作被分派以及使用什么数据（登录reducer）？

如果您担心printData 记录数据但Products 没有呈现您的数据，那么这可能是因为您没有在组件中呈现products。

我之前正在渲染，但这会使应用程序崩溃，所以我将其从视图中删除以检查天气数据是否到来

因此，您的应用程序崩溃的代码并想知道原因，但您没有在问题中包含该代码。我希望你能看到那里的问题。当应用程序崩溃时，您通常会收到错误消息，也可以将其包含在您的问题中。

我编辑了问题并添加了导致错误的代码

【参考方案1】：

改变

const initialState = [] to  const initialState = 

const printdata = () => 
    console.log(product?.name); // check is product exists then console.log(product.name)

【讨论】：

非常感谢你不知道我在过去 5 天里如何解决这个错误，现在它正在工作。但是没有? printsData 函数将数据记录到控制台，但是没有? 它现在不会呈现我将? 放入<Text>product?.name</Text> 它正在工作，再次感谢