React.js TypeError: 无法读取undefined的属性“productID”

React 是一个声明性、高效、灵活的JavaScript库，用于构建用户界面。然而，就像其他任何技术一样，React也有自己的问题。其中一个问题是在使用React组件时可能出现的 “TypeError: 无法读取undefined的属性‘productID’” 错误。

这里的“productID”是一个对象、变量或数组，它可以是任何东西。我下面给出了所有这些的示例。

当组件尝试访问在当前范围内不存在的对象或变量时，通常会出现此错误。有时，它存在于当前范围内，但定义不正确。

在本文中，我们将讨论React中此TypeError的原因和解决方案。

示例1：当对象或变量不存在时，将发生TypeError。

在此错误中，我们在返回块中使用了特定的变量，但我们在返回块之前忘记定义它。如下面的代码所示，“productID”在返回块中使用，但在返回块之前从未定义和初始化。

import React from 'react'; 
  
function App() { 
  
    return ( 
        <div className= "App"> 
            <h1>GeekForGeeks </h1> 
            <h2>  
                This example shows when the object  
                or variable is not defined. 
            </h2> 
            <h2> Variable: { productID } </h2> 
        </div> 
    ); 
} 
  
export default App;

输出：

要解决这个错误，我们只需要简单地定义变量 ‘productID’ 为 productID = “GFG” 。

解决方案:

import React from 'react'; 
  
function App() { 
  
    // Here the productID is defined and initialized 
    let productID = "GFG"; 
      
    return ( 
        <div className="App"> 
            <h1 style={{color:"green"}}> 
                GeeksforGeeks 
            </h1> 
            <h2> 
                This example shows when the object  
                or variable is defined 
            </h2> 
            <h2>then the error is not there.</h2> 
            <h2>Variable: {productID}</h2> 
        </div> 
    ); 
} 
  
export default App;

输出：

示例2：当你尝试在数组上使用.map时，会出现TypeError错误。

当你尝试在未定义的数组上使用.map时，会发生错误。如下所示的代码中，在返回块之前声明了product，但在访问它时，我们尝试将其作为数组访问，但我们从未将其初始化为数组。

import React from 'react'
  
function App() { 
    let products; 
    return ( 
        <div className="App"> 
            <h1>GeekForGeeks</h1> 
            <h2> 
                This example shows when we use map  
                on array that is not defined 
            </h2> 
            {products.map(product => ( 
                <h2 key={product.productID}> 
                    {product.productName} 
                </h2> 
            ))} 
        </div> 
    ); 
} 
  
export default App;

输出:

解决方案： 解决上述错误的方法是，您可以定义数组，或者您可以使用useState钩子。在定义数组时，使用useState([])而不是类似useState()的方式。

1. 在不使用React Hooks的情况下定义数组。

import React from 'react'
  
function App() { 
    let products = [ 
        { 
            productID: 1, 
            productName: "GFG"
        }, 
        { 
            productID: 2, 
            productName: "GeeksforGeeks"
        }, 
    ]; 
    return ( 
        <div className="App"> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h2>Solution for Example 2.</h2> 
            {products.map(product => ( 
                <h2 key={product.productID}> 
                    {product.productName} 
                </h2> 
            ))} 
        </div> 
    ); 
} 
  
export default App;

输出：

2. 使用useState和useEffect钩子定义数组

import React, { useState, useEffect } from 'react'; 
  
function App() { 
    const [products, setProducts] = useState([]); 
    let productArray = true; 
  
    useEffect(() => { 
        let productID = 1; 
        let productName = "GFG"; 
        let product = { productID, productName }; 
        setProducts([...products, product]); 
    }, [productArray]) 
  
    return ( 
        <div className="App"> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h2>Solution for Example 2.</h2> 
            {products.map(product => ( 
                <h2 key={product.productID}> 
                    {product.productName} 
                </h2> 
            ))} 
        </div> 
    ); 
} 
  
export default App;

输出：