我的目标是获取我的API，并在安装组件时对数据进行一些逻辑处理。我创建了另一个useEffect，仅在第一个访存调用成功时才运行。我可以获取所有数据，但是出现错误“无法读取null的属性'length'”。如果我理解正确，那么每当companyData更改时，第二个useEffect就会运行。
错误：
54 | useEffect(() => {
55 | async function organizeReviews() {
56 | let companyReviews = []
> 57 | for(let i = 0; i < companyData.length; i++) {
| ^ 58 | let reviewsForThisCo = []
59 | // loop through userReviews array
60 | for(let j=0; j < userReviews.length; j++) {
码：
const [averageRatings, setAverageRatings] = useState(null)
const [companyData, setCompanyData] = useState(null)
const [userReviews, setUserReviews] = useState([])
const [organizedReviews, setOrganizedReviews] = useState(null)
// Adding empty [] as second argument to run once component mounts
useEffect(() => {
async function getRatings() {
try{
const ratingRes = await fetch(process.env.REACT_APP_API_URL + '/api/v1/collected_reviews/')
const ratingJson = await ratingRes.json()
setAverageRatings(ratingJson.data)
} catch(err) {
console.log(err);
}
}
async function getCompanyData() {
try{
const companyDataRes = await fetch(process.env.REACT_APP_API_URL + '/api/v1/companies/')
const companyDataJson = await companyDataRes.json()
setCompanyData(companyDataJson.data)
} catch(err) {
console.log(err);
}
}
async function getCompanyReviews() {
try{
const reviewsRes = await fetch(process.env.REACT_APP_API_URL + '/api/v1/reviews/')
const reviewsJson = await reviewsRes.json()
setUserReviews(reviewsJson.data)
} catch(err) {
console.log(err);
}
}
getRatings()
getCompanyData()
getCompanyReviews()
}, [])
useEffect(() => {
async function organizeReviews() {
let companyReviews = []
for(let i = 0; i < companyData.length; i++) {
let reviewsForThisCo = []
// loop through userReviews array
for(let j=0; j < userReviews.length; j++) {
// if the user review id matches the company id
if(userReviews[j].company.id === companyData[i].id) {
reviewsForThisCo.push(userReviews[j])
}
}
companyReviews.push(reviewsForThisCo)
}
setOrganizedReviews(companyReviews)
}
organizeReviews()
}, [companyData])
每当companyData更改时，第二个useEffect将运行。
确实如此。但它也将始终在组件的初始安装上运行。因此，您必须确保您的内容companyData存在于第二个内容中useEffect，因为它在第一个渲染中将不存在：
useEffect(() => {
if (companyData){
async function organizeReviews() {
let companyReviews = []
for(let i = 0; i < companyData.length; i++) {
let reviewsForThisCo = []
// loop through userReviews array
for(let j=0; j < userReviews.length; j++) {
// if the user review id matches the company id
if(userReviews[j].company.id === companyData[i].id) {
reviewsForThisCo.push(userReviews[j])
}
}
companyReviews.push(reviewsForThisCo)
}
setOrganizedReviews(companyReviews)
}
organizeReviews()
} // if (companyData)
}, [companyData])
现在它将在第一次渲染上运行，但是什么都不做，因为companyData还不存在。然后它将在每次companyData更改时运行。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句