React Material-Table编辑下拉框API数据填充为空问题求助

我来帮你搞定这个问题！你遇到的核心问题是material-table的lookup属性要求传入一个键值对格式的对象，但你当前从API获取并处理后的myUserData是一个包含多个单键对象的数组，格式完全不匹配，所以下拉框无法识别这些选项。

问题分析 #

你现在的myUserData格式是这样的：

[{"DaChZYtatmVUXskSSzg9GTMsh4J3":"Peter Andri"},{"A1AtLoKhnwctu7Wwxtv85sLwDGj2":"Christine Wood"}]

但material-table的lookup需要的是这种结构的对象：

{
  DaChZYtatmVUXskSSzg9GTMsh4J3: 'Peter Andri',
  A1AtLoKhnwctu7Wwxtv85sLwDGj2: 'Christine Wood'
}

解决方案：调整数据处理逻辑 #

我们只需要修改getUsers函数中处理返回数据的方式，直接构建符合要求的键值对对象，而不是数组：

1. 修改getUsers函数

const getUsers = () => {
  const myToken = Cookies.get('access_token');
  if (myToken === undefined) {
    history.push('/auth/login-page');
  } else {
    try {
      const myUrl = `${APIurl}users.json?orderBy="active"&equalTo=1`;
      axios.get(myUrl).then((res) => {
        console.log(res.data);
        const myData = res.data;
        // 初始化一个空对象来存储用户键值对
        const usersLookup = {};
        for (var key1 in myData) {
          const userId = myData[key1].userUid;
          const userName = `${myData[key1].firstName} ${myData[key1].lastName}`;
          // 直接把用户ID和姓名存入对象
          usersLookup[userId] = userName;
        }
        // 更新状态为这个键值对对象
        setmyUserData(usersLookup);
      });
    } catch (err) {
      console.log(err);
    }
  }
};

2. 调整myUserData的初始状态

确保你的状态初始值是空对象（而不是数组）：

const [myUserData, setmyUserData] = useState({});

3. 更新列配置中的lookup

现在可以直接把myUserData传给lookup了：

{ 
  title: 'Posted by', 
  field: 'listingPersonId', 
  lookup: myUserData, 
},

为什么之前硬编码的能正常工作？ #

因为你硬编码的内容正好是lookup需要的键值对对象格式，而API处理后的数组结构无法被material-table识别，所以下拉框显示为空。

这样修改后，当API返回用户数据时，会自动转换成正确的格式，编辑模式的下拉框就能正常显示用户选项了！

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