React中用返回函数存储Axios数据失败：array2map为何为undefined？

1. stepTwo函数未返回Promise #

你的stepTwo函数内部调用了返回Promise的axiosTest()，但**stepTwo本身没有return这条Promise链**，所以执行var array2map = stepTwo();时，stepTwo默认返回undefined，这就是array2map为undefined的直接原因。

修复stepTwo只需补充return：

function stepTwo(){
  return axiosTest() // 新增return，把Promise链返回出去
    .then(data =>{
       var namesArray = data;
       return namesArray;
    })
}

2. 异步数据不能直接同步赋值 #

就算修复了stepTwo的return问题，array2map也只是一个Promise对象，而非你期望的数组。Axios请求是异步操作，组件首次渲染时请求还未完成，直接调用map方法依然会报错。

在React中处理异步数据，必须用状态+副作用钩子：

import React, { useState, useEffect } from "react";
// ...其他导入代码

function Component1(){
  const [array2map, setArray2map] = useState([]); // 初始化空数组避免map报错

  useEffect(() => {
    axiosTest()
      .then(data => {
        setArray2map(data); // 请求完成后更新状态，触发组件重新渲染
      })
      .catch(err => {
        console.error('请求失败:', err);
      });
  }, []); // 空依赖数组表示仅在组件挂载时执行一次请求

  return(
    <div>
      {/* 注意用{}包裹变量，同时给列表项加唯一key */}
      {array2map.map(item => <p key={item.id}>{item.name}</p>)}
    </div>
  )
}

另外提醒：你原JSX里的<p>item.name</p>会直接渲染字符串item.name，必须改成<p>{item.name}</p>才能显示实际数据；React列表项需要添加唯一key属性，这是组件渲染的要求。

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