5个产品后如何渲染公司?React js;

Question

我想做一个电子商务商店，我想在每2个<ProductCard/>组件后渲染一个<CompanyCard/>组件。我从来没有做过这样的事情，所以我不确定我的方法是否正确

这是我想要的一个例子:

<ProductCard/>
<ProductCard/>
<CompanyCard/>
<ProductCard/>
<ProductCard/>
<CompanyCard/>
(and so on..)

但由于某些原因，我得到一个空白页，在控制台有这两个错误

The above error occurred in the <CompanyCard> component:

Uncaught TypeError: Cannot read properties of undefined (reading '_id')

这是我的代码(我也使用React Redux)

function HomePage() {
let counter = 0;
const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
const { error, loading, products } = productList;
const companyList = useSelector((state) => state.companyList);
const { companies } = companyList;
useEffect(() => {
dispatch(listProducts(), listCompanies());
}, [dispatch]);
return (
<>
<Navbar />
<div className="homePage">
<div className="centerItemsContainer">
<div className="productsContainer">
{products.map((product) => {
counter++;
if (counter % 4 === 0) {
const companyIndex = counter / 4 - 1;
const company = companies[companyIndex];
return (
<>
<CompanyCard company={company} />
<ProductCard product={product} />
</>
);
} else {
return <ProductCard product={product} />;
}
})}
</div>
</div>
</div>
<Footer />
</>
);
}
export default HomePage;

Answer 1

我希望这对你有帮助，如果你想在第4个地方渲染公司，请将其更改为4，同样适用于你想要的地方

const products = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
export const App = () => {
return (
<>
{products.map((product, index) => {
const counter = index + 1;
if (counter % 2 === 0) {
return (
<>
<p>Prod{index}</p>
<p>Company</p>
</>
);
}
return <p>Prod{index}</p>;
})}
</>
);
};

Answer 2

首先，看起来您只是选择了一个不存在的公司。记录companyIndex，看看你使用的是什么值。

同样，也不需要手动跟踪counter，它是map的第二个参数，所以只需写入:

{products.map((product, counter) => {

Answer 3

你得到一个错误，因为你的迭代器超过数组长度

我宁愿使用一个普通的for循环:

const products1 = [...Array(10).keys()].map((e) => "p" + e);
const companies1 = [...Array(10).keys()].map((e) => "c" + e);
console.log(getList(products1, companies1));
const products2 = [...Array(10).keys()].map((e) => "p" + e);
const companies2 = [...Array(1).keys()].map((e) => "c" + e);
console.log(getList(products2, companies2));
function getList(products, companies) {
const list = [];
const min = Math.min(products.length, companies.length);
for (
let i = 0, p = 0, c = 0;
i < products.length + companies.length;
i += 1
) {
// every fifth is a company, but only if there is a company left
// or there are no more products
if ((c < companies.length && i % 5 === 4) || p >= products.length) {
list.push(companies[c++]);
} else {
list.push(products[p++]);
}
}
return list;
}

最终组件:

function HomePage() {
let counter = 0;
const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
const { error, loading, products } = productList;
const companyList = useSelector((state) => state.companyList);
const { companies } = companyList;
function getList() {
const list = [];
const min = Math.min(products.length, companies.length);
for (
let i = 0, p = 0, c = 0;
i < products.length + companies.length;
i += 1
) {
if ((c < companies.length && i % 5 === 4) || p >= products.length) {
list.push(<CompanyCard company={companies[c++]} />);
} else {
list.push(<ProductCard product={products[p++]} />);
}
}
return list;
}
useEffect(() => {
dispatch(listProducts(), listCompanies());
}, [dispatch]);
return (
<>
<Navbar />
<div className="homePage">
<div className="centerItemsContainer">
<div className="productsContainer">{getList()}</div>
</div>
</div>
<Footer />
</>
);
}
export default HomePage;

Answer 4

{products.map((item, index) => (
<>
<ProductCard />
{(!!index && !((index + 1) % 5) && <CompanyCard />)}
</>
)}