Javascript 如何通过React中的对象数组执行.map（）

我正在尝试映射一些数据，这些数据如下所示：

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

并将其显示为列表

我知道allAreas的错误没有定义。我觉得这是因为我不熟悉JSON对象

检查所有区域的状态时，显示未定义

这是我试过的密码

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

const目录=（）=>{
const[allAreas，setAllAreas]=useState（[]）；
useffect（（）=>{
fetchAllAreasData（）。然后（（数据）=>setAllAreas（数据））；
}, []);
返回(

{allAreas.map（（面积）=>(
{area.name}
))}

);
};

---

要澄清这是一个对象数组，只需将函数的第一行更改为：

const [allAreas, setAllAreas] = useState([]); // your defaulted state must be [] instead of {}

const [allAreas, setAllAreas] = useState([]);

---

只需将函数的第一行更改为：

const [allAreas, setAllAreas] = useState([]);

---

在映射之前，确保allArea存在

const目录=（）=>{
const[allAreas，setAllAreas]=useState（[]）；
useffect（（）=>{
fetchAllAreasData（）。然后（（数据）=>setAllAreas（数据））；
}, []);
返回(

{allAreas&&allAreas.map（（面积）=>(
{area.name}
))}

);
};

如果您的问题没有解决，请改用useReducer，因为有时在useState中使用数组时会出现一些react问题。类似于以下内容：

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

函数缩减器（状态=[]，操作）{
返回动作；
}
常量目录=（）=>{
const[allAreas，dispatch]=useReducer（reducer，[]）；
useffect（（）=>{
fetchallreasdata（）。然后（（数据）=>dispatch（数据））；
}, []);
返回(

{allAreas.length>0&&allAreas.map（（面积）=>(
{area.name}
))}

);
}; 

在映射之前，确保allArea存在

const目录=（）=>{
const[allAreas，setAllAreas]=useState（[]）；
useffect（（）=>{
fetchAllAreasData（）。然后（（数据）=>setAllAreas（数据））；
}, []);
返回(

{allAreas&&allAreas.map（（面积）=>(
{area.name}
))}

);
};

如果您的问题没有解决，请改用useReducer，因为有时在useState中使用数组时会出现一些react问题。类似于以下内容：

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

函数缩减器（状态=[]，操作）{
返回动作；
}
常量目录=（）=>{
const[allAreas，dispatch]=useReducer（reducer，[]）；
useffect（（）=>{
fetchallreasdata（）。然后（（数据）=>dispatch（数据））；
}, []);
返回(

{allAreas.length>0&&allAreas.map（（面积）=>(
{area.name}
))}

);
}; 

试试看

{allAreas&&allAreas.map（（面积）=>(
{area.name}
))}

试试看

{allAreas&&allAreas.map（（面积）=>(
{area.name}
))}

这可能是一个问题，因为您的map函数在promise解析和获取数据之前被调用

为了避免这种情况，请在迭代之前检查

'allAreas'

的长度

另外，指定给

'allreas'

对象而不是数组的初始值。 将初始赋值更改为数组

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.lenght && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

const目录=（）=>{
const[allAreas，setAllAreas]=useState（[]）；
useffect（（）=>{
fetchAllAreasData（）。然后（（数据）=>setAllAreas（数据））；
}, []);
返回(

{allAreas.lengh&&allAreas.map（（面积）=>(
{area.name}
))}

);
};

这可能是一个问题，因为您的map函数在promise解析和获取数据之前被调用

为了避免这种情况，请在迭代之前检查

'allAreas'

的长度

另外，指定给

'allreas'

对象而不是数组的初始值。 将初始赋值更改为数组

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.lenght && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

const目录=（）=>{
const[allAreas，setAllAreas]=useState（[]）；
useffect（（）=>{
fetchAllAreasData（）。然后（（数据）=>setAllAreas（数据））；
}, []);
返回(

{allAreas.lengh&&allAreas.map（（面积）=>(
{area.name}
))}

);
};

allreas的初始值是空对象

useState（{}）

。使用

useState（[]）

Ok我这样做了，现在有一个错误allreas是未定义的。我刚刚检查了allAreas的状态，结果是未定义的。你能显示从FetchAllarasData返回的数据的console.log吗？[{“id”：“avon And somerset”，“name”：“avon And somerset”}，{“id”：“bedfordshire”，“name”：“bedfordshire”}，{“id”：“cambridgeshire”，“name”：“cambridgeshire”}，{“id”：“柴郡”、“姓名”：“柴郡警察局”}，{“id”：“伦敦市”、“姓名”：“伦敦市”}]Hi@akhil，我想澄清一下。不，当你试图映射它时，空数组不会给你带来错误。这里的问题是假设的allAreas数组已变成未定义的。因为“未定义”没有映射函数。它抛出了一个错误

allreas

的初始值是空对象

useState（{}）

。Use

useState（[]）

好的，我这样做了，现在有一个错误Allreas是未定义的。我刚刚检查了Allreas的状态，它的读数为未定义。你能不能显示一个控制台。从FetchAllreasData返回的数据日志？[{“id”：“avon and somerset”，“name”：“avon and somerset”}，{“id”：“bedfordshire”，“name”：“bedfordshire”}，{“id”：“剑桥郡”，“姓名”：“剑桥郡”}，{“id”：“柴郡”，“姓名”：“柴郡警察局”}，{“id”：“伦敦市”，“姓名”：“伦敦市”}]Hi@akhil，我想澄清这一点。不，当您尝试映射它时，空数组不会抛出错误。pr