我已經使用 map 函式在頁面上呈現了一個組件網格，并且我只想在單擊它后僅呈現具有所有詳細資訊的組件，并且只能得到一個錯誤訊息：
未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“徽標”）
我是 React 的新手，無法弄清楚為什么會發生這種情況。
一些幫助將不勝感激！
這是我的代碼：
Body 組件 - （父組件）
import { useState } from "react";
import CompanyList from "./CompanyList";
import Company from "./Company";
const Body = ({ companies }) => {
const [viewCompany, setViewCompany] = useState(false);
const showCompanyHandler = (company) => {
console.log("Clicked on company card");
setViewCompany(true);
};
return (
<div className="appBody">
<CompanyList
companies={companies}
showCompanyHandler={showCompanyHandler}
/>
{viewCompany && <Company />}
</div>
);
};
export default Body;CompanyList 組件（Body 的子代）
import Company from "./Company";
const CompanyList = ({ companies, showCompanyHandler }) => {
return (
<div className="companyList">
{companies.map((company) => (
<Company
key={company.id}
company={company}
showCompanyHandler={showCompanyHandler}
/>
))}
</div>
);
};
export default CompanyList;公司組件（CompanyList 的子組件） - 我想在頁面上顯示的組件
const Company = ({ company, showCompanyHandler }) => {
return (
<div className="company" onClick={(company) => showCompanyHandler(company)}>
{console.log(company)}
<img src={company.logo} alt="logo" />
<h1>{company.name}</h1>
<p>{company.companyDescription}</p>
</div>
);
};
export default Company;我不確定我在這里錯過了什么......
uj5u.com熱心網友回復：
如果我理解正確，您的代碼結構已損壞，您需要重構它以實作您正在尋找的那種邏輯。
首先，我建議你洗掉此{viewCompany && <Company />}，viewCompany并showCompanyHandler從你的身體部件。
由于 Company 組件將始終可見，因此 IMO 應該負責處理您嘗試實作的這種“擴展”邏輯，例如：
const Company = ({ company }) => {
const [showDetails, setShowDetails] = useState(false);
const toggleShowDetails = () => setShowDetails(!showDetails);
return (
<div className="company" onClick={toggleShowDetails}>
{showDetails &&
<>
<img src={company.logo} alt="logo" />
<h1>{company.name}</h1>
<p>{company.companyDescription}</p>
</>
}
</div>
);
};
export default Company;如您所見，使用此實作，您不再需要傳遞showCompanyHandler給 Company 組件，并且可以從 Body 組件中洗掉所有這些邏輯。
uj5u.com熱心網友回復：
如果 CompanyList 組件作業正常，一個簡單的方法是使用函式動態生成串列，而不是直接參考組件。
import { useState } from "react";
import CompanyList from "./CompanyList";
import Company from "./Company";
const Body = ({ companies }) => {
const [viewCompany, setViewCompany] = useState(false);
const showCompanyHandler = () => {
console.log("Clicked on company card");
setViewCompany(true);
};
// I removed the showCompanyHandler attribute and
// added an onClick to CompanyListContainer, instead.
const generateCompanyList = (companies) => {
if (viewCompany === false) return null;
return <CompanyList companies={companies} />
)
}
return (
<div className="appBody">
<CompanyListContainer onClick={showCompanyHandler}>
{generateCompanyList}
</CompanyList>
</div>
);
};
export default Body;
不幸的是，如果 generateCompanyList 為空，則應該沒有可單擊的內容。因此，您可以為最小寬度/高度的 div 添加一些樣式，或者，您可以將該 onClick 移動到您的 appBody 組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/354586.html
標籤：javascript 反应 成分
上一篇：按隨機生成的權重對元組進行排序
下一篇：Mongoose獲取帶條件的欄位