不断收到 TypeError：当我单击复选框时无法读取未定义的属性“地图”，不知道问题出在哪里

Posted 2023-02-22

【中文标题】不断收到 TypeError：当我单击复选框时无法读取未定义的属性“地图”，不知道问题出在哪里

【英文标题】：Keep getting TypeError: Cannot read property 'map' of undefined when I click on checkbox, dont know where the problem is

【发布时间】：2020-03-28 02:11:22

【问题描述】：

因此，当我单击复选框时，我不断收到此错误，并且一旦单击复选框，所需的结果将是 active 的属性应更改为相反。即使我在单击复选框后删除了 activeHandler 函数，我也会收到相同的错误，但现在是 tbody 中产品的初始映射

const ProductList = props => 
const [products, setProducts] = useState(
    [
        
            id: 1,
            name: 'Product 1',
            ean: 242355,
            type: 'Food',
            weight: 24,
            color: 'blue',
            active: true,
            quantity: 2,
            price: 25
        ,
        
            id: 2,
            name: 'Product 2',
            ean: 57434,
            type: 'Food',
            weight: 48,
            color: 'red',
            active: false,
            quantity: 5,
            price: 12
        
    ]
);

const activeHandler = productId => 
    setProducts(prevState => 
        const updatedProducts = prevState.products.map(prod => 
            if (prod.id === productId) 
                prod.active = !prod.active
            
            return prod
        )
        return 
            products: updatedProducts
        
    )


return (
    <div>
        <table className="table">
            <thead>
                <tr>
                <th scope="col">Name</th>
                <th scope="col">EAN</th>
                <th scope="col">Type</th>
                <th scope="col">Weight</th>
                <th scope="col">Color</th>
                <th scope="col">Active</th>
                <th></th>
                </tr>
            </thead>
            <tbody>
            products.map(product => (
                <tr key=product.id>
                <td>product.name</td>
                <td>product.ean</td>
                <td>product.type</td>
                <td>product.weight</td>
                <td>product.color</td>
                <td>
                    <input type="checkbox" checked=product.active onChange=() => activeHandler(product.id) />
                </td>
                <td>
                <button className="btn btn-secondary mr-1" disabled=product.active>VIEW</button>
                <button className="btn btn-primary mr-1" disabled=product.active>EDIT</button>
                <button className="btn btn-danger" disabled=product.active>DELETE</button>
                </td>
                </tr>
            ))     
            
            </tbody>
       </table>
    </div>
)

【问题讨论】：

很明显，产品没有定义。检查产品是否不存在后添加return语句。

已定义，了解更多关于 hooks

【参考方案1】：

在这种情况下，您的 prevState 是实际的数组，因此您应该映射它并将其作为新状态返回，而不是带有 products 键的对象：

setProducts(prevState => 
        const updatedProducts = prevState.map(prod => 
            if (prod.id === productId) 
                prod.active = !prod.active
            
            return prod
        )
        return updatedProducts
    )

【讨论】：

谢谢。这样就可以了。