Question

出现此错误“TypeError:无法读取未定义的属性‘map’”

2019-07-31

37

node.js reactjs

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>