Question

TypeError: Cannot read property 'map' of undefined

此错误不断出现，不会让我运行我的网站。任何帮助或协助都会很棒。我只需要弄清楚到底要更改什么才能使它运行。

    import React from "react";
    import styled from "styled-components";
    import { AppContext } from "../App/AppProvider";
    import PriceTile from "./PriceTile";

    export default function() {
      return (
        <AppContext.Consumer>
          {({ prices }) => (
            <PriceGrid>
              {prices.map((price, index) => (
                <PriceTile key={`priceTile-${index}`} index={index} price={price} />
              ))}
            </PriceGrid>
          )}
        </AppContext.Consumer>
      );
    }

Answer 1

可能您没有为Context提供初始值，

检入../App/AppProvider到React.createContext的电话，请检查是否为对象提供了prices的空数组。

Answer 2

您可以在制作地图之前检查prices是否存在：

<AppContext.Consumer>
  {({ prices }) => (
    <PriceGrid>
      {prices && prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

...或者您可以将prices默认为空数组：

<AppContext.Consumer>
  {({ prices = [] }) => (
    <PriceGrid>
      {prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

...或者，更好的是，两者都做：

<AppContext.Consumer>
  {({ prices = [] }) => (
    <PriceGrid>
      {prices && prices.map((price, index) => (
        <PriceTile key={`priceTile-${index}`} index={index} price={price} />
      ))}
    </PriceGrid>
  )}
</AppContext.Consumer>

此错误出现问题“ TypeError：无法读取未定义的属性'map'”

2 个答案: