我希望这有帮助，如果你想渲染公司在第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>;
      })}
    </>
  );
};

首先，看起来您只是选择了一个不存在的公司。请记录companyIndex并查看您使用的值。
此外，不需要手动跟踪counter，它是map的第二个参数，因此只需编写：

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

由于迭代器超出数组长度，因此将出现错误
我更愿意使用一个普通的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;

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