reactjs 无法读取未定义的react native的属性“map”

wlwcrazw 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(202)

image errors
执行产品组件中的map函数时，将引发错误“无法读取属性”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，但我不能弄清楚

reactjs

来源：https://stackoverflow.com/questions/75078383/cannot-read-property-map-of-undefined-react-native

2条答案

按热度按时间

wfsdck301#

它应该是ProductItem组件中的列表，并使用list.map，因为当您在ProductItem中发送prop时，您发送的是列表

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;

赞(0）回复(0）举报 2023-01-12

pb3skfrl2#

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

<Child parentToChild={data}/>

在这里，我们将数据作为数据传递到子组件中。
data是我们必须传递的数据，parentToChild是 prop 的名称。
接下来，是捕获子组件中的数据的时候了，这非常简单。
这里，可能有两种情况。

**案例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>
        )
    }
}

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 无法读取未定义的react native的属性“map”

2条答案

相关问题

热门标签

最新问答