无法读取未定义反应本机的属性\'map\'答案

【问题标题】：cannot read property 'map' of undefined react native无法读取未定义反应本机的属性\'map\'
【发布时间】：2023-01-11 17:55:34
【问题描述】：

image errors

执行Product组件中的map函数报错Cannot read property 'map' of undefined'。

我正在关注 React Native 教程，在将值从一个组件的状态传递到另一个组件时，我一直遇到问题。我正在关注 React Native 教程，在将值从一个组件的状态传递到另一个组件时，我一直遇到问题。

我使用 axios 来获取数据

产品屏幕

import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import MenuProduct from '../components/Product/MenuProduct';
import MainHeader from '../components/Header/MainHeader';
import {POPULAR, Top_Sell} from '../data';
import ProductItem from '../components/Product/ProductItem';
import instance from '../routes/instance';

const ProductScreen = () => {
  const [product, setProduct] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const data = await instance('/api/products', {
        method: 'GET',
      });
      setProduct(data);
    };
    fetchData();
  }, []);

  return (
    <View style={{flex: 1}}>
      <MainHeader />
      <MenuProduct list={Top_Sell} />
      <ProductItem list={product} />
    </View>
  );
};

export default ProductScreen;

产品项目

import React from 'react';
import ProductCard from './ProductCard';

const ProductItem = ({product}) => {
  return (
    <>
      {product.map((item, index) => {
        return (
          <ProductCard
            id={item._id}
            image={item.image}
            title={item.title}
            price={item.price}
            item={item}
            key={index}
          />
        );
      })}
    </>
  );
};

export default ProductItem;

产品卡

import React from 'react';
import {Image, ScrollView, Text, TouchableOpacity, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/theme';
import AddItem from '../../utils/AddItem';

const CardHeight = 220;
const ProductCard = ({props}) => {
  return (
    <ScrollView>
      return (
      <View
        style={{
          marginLeft: spacing.l,
          marginBottom: spacing.l,
          marginRight: spacing.l,
        }}>
        <View>
          <View
            style={{
              backgroundColor: colors.white,
              borderRadius: sizes.radius,
              shadowColor: colors.black,
              shadowRadius: 4,
              shadowOpacity: 0.1,
              shadowOffset: {width: 0, height: 2},
            }}>
            <TouchableOpacity
              style={{
                borderRadius: sizes.radius,
                overflow: 'hidden',
                flexDirection: 'row',
              }}>
              <Image
                style={{
                  borderRadius: sizes.radius,
                  width: 160,
                  height: CardHeight - 60,
                  resizeMode: 'cover',
                }}
                source={props.image}
              />

              <View style={{marginTop: spacing.l}}>
                <View style={{marginLeft: spacing.l, marginBottom: spacing.s}}>
                  <Text style={{fontSize: 16, color: '#FA4A0C'}}>
                    {props.title}
                  </Text>
                </View>
                <View style={{marginLeft: spacing.l}}>
                  <Text style={{fontSize: 14, color: '#8b8989'}}>
                    {props.price}
                  </Text>
                </View>
                <TouchableOpacity style={{marginLeft: 130}}>
                  <AddItem />
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      ); })
    </ScrollView>
  );
};

export default ProductCard;

我在 stackoverflow 上尝试了几种方法，但我无法弄清楚

【问题讨论】：

如果您在 ProductScreen 中使用<ProductItem list={product} />，那么您应该在 ProductItem 中使用const ProductItem = ({list}) => {。

标签： reactjs react-native

【解决方案1】：

它应该在 ProductItem 组件中列出并使用 list.map 因为当您在 ProductItem 中发送道具时您正在发送列表

import React from 'react';
import ProductCard from './ProductCard';

const ProductItem = ({list}) => {
  return (
    <>
      {list.length > 0 && list.map((item, index) => {
        return (
          <ProductCard
            id={item._id}
            image={item.image}
            title={item.title}
            price={item.price}
            item={item}
            key={index}
          />
        );
      })}
    </>
  );
};

export default ProductItem;

【讨论】：

谢谢很有效的方法

【解决方案2】：

检查以下用于将数据从父组件传递到子组件的语法。

<Child parentToChild={data}/>

在这里，我们将子组件中的数据作为数据传递。

data 是我们要传递的数据，parentToChild 是道具的名称。

接下来，是时候捕获子组件中的数据了。而且非常简单。

这里，可以有两种情况。

情况1：如果您使用的是功能组件，只需在参数中捕获 parentToChild 即可。

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

情况 2：如果您有类组件，则只需使用 this.props.parentToChild。

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

【讨论】：