Question

无法读取未定义的 React Native 属性“map”

2023-01-11

941

reactjs react-native

图像错误

执行 Product 组件中的 map 函数时，抛出错误 Cannot read property 'map' of undefined'。

我正在按照 react Native 教程操作，在将值从一个组件的状态传递到另一个组件时，一直遇到问题。我正在按照 react Native 教程操作，在将值从一个组件的状态传递到另一个组件时，一直遇到问题。

我使用 axios 来获取数据

ProductScreen

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;

ProductItem

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;

ProductCard

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 上尝试了几种方法，但就是搞不定

Answer 1

它应该是 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;

Answer 2

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

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