咱们先拆解下你遇到的核心问题，其实主要出在getUserName函数的实现逻辑，以及它在Observable管道里的调用方式上：

1. getUserName函数的核心问题 #

你写的getUserName返回了一个匿名函数，而不是直接返回匹配的用户名。另外，用forEach遍历数组时，return item.name只是终止当前的forEach迭代，并不会把值返回给外层函数，最终你拿到的by字段其实是一个未执行的空函数，自然得不到预期的用户名。

2. 修正后的getUserName实现 #

我们可以用数组的find方法来高效定位匹配的用户，直接返回对应的名字，同时处理找不到用户的边界情况：

const getUserName = (userNumber: number, usersArray: Users[]) => {
  // 找到第一个id匹配的用户
  const matchedUser = usersArray.find(item => item.id === userNumber);
  // 存在匹配用户则返回名字，否则返回默认值
  return matchedUser ? matchedUser.name : "Unknown User";
};

3. 优化fetchDesignsData中的代码 #

修正getUserName后，调用它就能直接拿到用户名。另外，我们可以用map方法直接生成目标数组，替代手动创建数组再push的写法，让代码更简洁：

export const fetchDesignsData = (usersArray: Users[]) => (dispatch: Dispatch<Action>) => {
  console.log(usersArray);
  const DESIGNS_URL = `http://localhost:5000/designs`;
  dispatch({ type: "FETCH_DATA_REQUEST" });
  
  const response$ = from(axios.get(DESIGNS_URL));
  
  response$
    .pipe(
      map((response) => {
        // 直接用map生成最终需要的数组
        const newArray = response.data.map((item: { 
          name: any; 
          courses: any; 
          wales: any; 
          updated: any; 
          user_id_last_update: any 
        }) => ({
          name: item.name,
          courses: item.courses,
          wales: item.wales,
          last_updated: item.updated,
          by: getUserName(item.user_id_last_update, usersArray) // 直接获取用户名
        }));
        dispatch({ type: "FETCH_DATA_SUCCESS", payload: newArray });
        return newArray;
      })
    )
    .subscribe({
      error: (err) => {
        // 补充错误处理，让状态管理更完整
        dispatch({ type: "FETCH_DATA_FAILURE", payload: err.message });
      }
    });
};

额外优化建议 #

• 给Users类型做明确的类型定义，避免使用any，提升代码的类型安全性：

  interface Users {
    id: number;
    name: string;
  }
  

• 一定要添加错误处理逻辑，避免请求失败时状态停留在请求中，保证状态的完整性。

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