javascript - 重新加载页面时无法读取未定义的属性“ArtisanID”
问题描述
当我重新加载页面时,我收到此错误:无法读取未定义的属性“ArtisanID”。
如何解决这个问题?
我是这个框架的新手,并认为这可能是因为刷新页面时未呈现组件指令。
我正在使用 3 个上下文,所以我不能使用 React.Component 类,除非我将所有 3 个结合起来,但我认为这不是一个好主意。
import React, { useContext } from 'react'
import { Link } from 'react-router-dom'
import { ProductContext } from '../../global/ProductContext'
import { ArtisanContext } from '../../global/ArtisanContext'
import ProductCard from './ProductCard'
import { CartContext } from '../../global/CartContext'
const ProductPage = (props) => {
//props.preventDefault();
const {products} = useContext(ProductContext)
const {artisans} = useContext(ArtisanContext)
const { dispatch } = useContext(CartContext);
let productIDFind = props.match.params.id
const product = products.find(x=> x.ProductID === productIDFind)
const artisan = artisans.find(x=> x.ArtisanName === product.ProductArtisan)
const otherProducts = []
products.forEach(product => {
if (artisan.ArtisanName === product.ProductArtisan) {
otherProducts.push(<ProductCard key={product.ProductID} product={product} />)
}
});
return (
<section className="productPage main-section">
<div className="productPage-container main-section-constainer">
<Link className="artisanLink" to={'/Artisans/' + artisan.ArtisanID}>
<h1>Par <span>{artisan.ArtisanName}</span></h1>
</Link>
<div className="row">
<div className="productPage-principaleImg bg-img" style={{ backgroundImage: `url(${product.ProductProfilePicture})` }}></div>
<div className="productPage-info col">
<div className="row">
<div className="col">
<h2 className="productPage-Name">{product.ProductName}</h2>
<p className="productPage-Description">{product.ProductDescription}</p>
</div>
<div className="row">
<div className="productPage-Price">{product.ProductPrice}€</div>
<button className="addBtn" onClick={(e) => {
e.preventDefault();
dispatch({ type: 'ADD_TO_CART', id: product.ProductID, product })}}>
<span>Ajouter</span>
<span className="addImg bg-img"></span>
</button>
</div>
</div>
<div className="productPage-moreImg row">
<a className="productPage-YT-link" rel="noreferrer" href={product.ProductYT} target="_blank">
<div className="productPage-YT bg-img" style={{ backgroundImage: `url(${product.ProductProfilePicture})` }}></div>
<div className="productPage-YT-img bg img"></div>
</a>
<div className="productPage-img bg-img" style={{ backgroundImage: `url(${product.ProductSecondImg})` }}></div>
<div className="productPage-img bg-img" style={{ backgroundImage: `url(${product.ProductTreeImg})` }}></div>
</div>
</div>
</div>
<h3>Autre produits de {artisan.ArtisanName}</h3>
<div className="otherProducts">
{otherProducts}
</div>
</div>
</section>
)
}
export default ProductPage
工匠语境
import React, { createContext } from 'react'
import { db } from '../data/firebase'
export const ArtisanContext = createContext();
export class ArtisanContextProvider extends React.Component{
// Définition du state initial avec un tableau vide
state = {
artisans:[]
}
componentDidMount(){
const prevArtisans = this.state.artisans;
db.collection('Artisans').onSnapshot(snapshot => {
let changes = snapshot.docChanges();
changes.forEach(change => {
if (change.type === 'added') {
prevArtisans.push({
ArtisanID: change.doc.id,
ArtisanName: change.doc.data().ArtisanName,
ArtisanNbrProduits: change.doc.data().ArtisanNbrProduits,
ArtisanCategorie: change.doc.data().ArtisanCategorie,
ArtisanDescription: change.doc.data().ArtisanDescription,
ArtisanProfilePicture: change.doc.data().ArtisanProfilePicture,
ArtisanBanner: change.doc.data().ArtisanBanner
})
}
this.setState({
artisans: prevArtisans
})
})
})
}
render() {
return (
<ArtisanContext.Provider value={{artisans:[...this.state.artisans]}} >
{this.props.children}
</ArtisanContext.Provider>
)
}
}
解决方案
我看到artisan
是贴花的artisans.find
。的结果artisans.find
可以是undefined
如果没有找到项目。所以会出现这个问题。为避免此问题,您可以使用可选链接:
<Link className="artisanLink" to={'/Artisans/' + artisan?.ArtisanID}>
<h1>Par <span>{artisan?.ArtisanName}</span></h1>
推荐阅读
- amazon-web-services - Cloud Formation Template:403,而文件是从私有 S3 复制的
- java - 如何在 Task1 、 Task2 、 Task3 类 run() 方法中为 threadArray 变量赋值?
- javascript - 警告:道具类型失败:提供给“ForwardRef(FormControl)”的“字符串”类型的无效道具“错误”,预期为“布尔”
- maven - 在构建时,maven 应在第 1 步和第 3 步调用 spring-boot-maven-plugin。我可以避免警告“发现插件的重复声明”吗?
- asp.net-mvc - 我的可搜索下拉列表视图不起作用 asp.net mvc
- java - 为什么这里没有调用我的重绘方法?
- wordpress - WordPress:Softacous - 无法写入配置文件 _htaccess
- reactjs - 反应状态值调用
- r - 神经网络:需要数字/复杂矩阵/向量参数
- xcode - 想在 swift 5 中用事件时间(来自我的 json api)减去当前时间