Javascript 持续获取类型错误：无法读取属性'；地图'；当我点击复选框时，不知道问题在哪里

因此，当我点击复选框时，我一直会遇到这个错误，并且期望的结果是，一旦点击复选框，active的属性应该更改为reversit。即使单击复选框后删除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>
)

const ProductList=props=>{
const[products，setProducts]=useState(
[
{
id:1，
名称：“产品1”，
ean:242355，
类型：“食物”，
体重：24，
颜色：“蓝色”，
主动：对，
数量：2，
价格:25
},
{
id:2，
名称：‘产品2’，
ean:57434，
类型：“食物”，
体重：48，
颜色：“红色”，
活动：错误，
数量：5，
价格:12
}
]
);
const activeHandler=productId=>{
setProducts（prevState=>{
const updatedProducts=prevState.products.map（prod=>{
if（prod.id==productId）{
prod.active=！prod.active
}
回程针
})
返回{
产品：更新产品
}
})
}
返回(
名称
伊恩
类型
重量
颜色
活跃的
{products.map（product=>(
{product.name}
{product.ean}
{product.type}
{乘积.权重}
{product.color}
activeHandler（product.id）}/>
看法
编辑
删除
))     
}
)

---

}

在本例中，您的

prevState

是实际数组，因此您应该映射它，并将其作为新状态返回，而不是带有

products

键的对象：

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

---

很明显，产品没有定义。在检查产品是否不存在后添加return语句。如果产品已定义，请了解有关hooks的详细信息谢谢。这就行了。