ReactJS中如何正确导出并导入多个列表数据？

你的问题核心在于导出和导入的方式不匹配，导致你拿到的不是预期的数组数据。下面给你两种可行的解决方案，推荐第一种，更符合ES6模块规范：

方案一：使用命名导出（推荐） #

修改data.js的导出方式 #

将默认导出改为命名导出，这样可以直接导出两个数组：

import React from 'react';
var nav1 = [ "SERVICE APP", "ONLINE ORDER:+91 7303434043", "CONTACT US", "STATUS LOCATOR", "MUMBAI", "TRACK ORDER", ]
var nav2=[
    { 'title':"HAFELE KARIA", 'image': "./images/img1." },
    { 'title':"BOAT WATCH", 'image': "./images/img2." },
    { 'title':"SONY TV", 'image': "./images/img3.", },
    { 'title':"WASHING MACHINE", 'image': "./images/img4." },
    { 'title':"AIRPODS PRO", 'image': "./images/img5." },
    { 'title':"JBL", 'image': "./images/img6." },
    { 'title':"LG OFFER", 'image': "./images/img7." },
    { 'title':"LG BUY FROM HOME", 'image': "./images/img8." },
    { 'title':"PLAYSTATION 5", 'image': "./images/img9." },
    { 'title':"OPPO RENO", 'image': "./images/img10." },
]
// 替换原来的默认导出为命名导出
export { nav1, nav2 };

修改Navbar1的导入方式 #

直接通过解构导入需要的两个数组：

import React from 'react';
import './index.css';
import nav1img from "./images/nav1.png";
import { FaMobileAlt } from 'react-icons/fa';
// 用命名导入获取nav1和nav2
import { nav1, nav2 } from './data';

const Navbar1 = () => {
    console.log(nav2); // 现在能正确输出数组了
    return (
        <div className="row1">
            <div className="left">
                <img src={nav1img} alt="Product" />
            </div>
            <a href="#"><FaMobileAlt className="icon1" /></a>
            <div className="right">
                { nav1.map((item, index) => {
                    return <>
                        <a href="#" key={index}> {item} </a>
                        <h1>|</h1>
                    </>
                }) }
            </div>
        </div>
    );
}
export default Navbar1;

方案二：保持默认导出，调整导入逻辑 #

如果你不想修改data.js的导出方式，可以在导入时解构默认导出的对象：

Navbar1修改后的代码 #

import React from 'react';
import './index.css';
import nav1img from "./images/nav1.png";
import { FaMobileAlt } from 'react-icons/fa';
// 导入默认导出的对象
import navData from './data';

const Navbar1 = () => {
    // 解构出需要的nav1和nav2
    const { nav1, nav2 } = navData;
    console.log(nav2); // 现在能正确输出数组了
    return (
        <div className="row1">
            <div className="left">
                <img src={nav1img} alt="Product" />
            </div>
            <a href="#"><FaMobileAlt className="icon1" /></a>
            <div className="right">
                { nav1.map((item, index) => {
                    return <>
                        <a href="#" key={index}> {item} </a>
                        <h1>|</h1>
                    </>
                }) }
            </div>
        </div>
    );
}
export default Navbar1;

为什么原来的代码不行？ #

你之前的import nav1 from './data'其实是把默认导出的整个对象赋值给了nav1变量，而不是你定义的nav1数组。这个对象里包含nav1和nav2两个属性，所以你之前调用nav1.map()时，本质是在给对象调用数组的map方法，自然会报错。

内容的提问来源于stack exchange，提问作者Sachin Vishwakarma