如何为react-jsonschema-form-extra的asyncTypeahead设置数据库初始值？

我看了你的问题和代码，核心问题出在selected属性的赋值方式上，结合你设置的mapping: 'id'，咱们来一步步解决：

问题根源 #

你设置了mapping: 'id'，这意味着表单会把选中项的id作为值存储到数据库，而不是整个对象。但你现在给selected传的是一个包含name的对象，组件无法通过这个对象匹配到对应的选项，所以加载时显示为空。

解决方案 #

你需要把从数据库获取到的用户ID直接赋值给selected，而不是对象。组件会自动根据这个ID，结合异步加载的选项数据，匹配到对应的项并渲染labelKey定义的标签。

修改后的代码示例：

user: { 
  "ui:field": "asyncTypeahead", 
  asyncTypeahead: { 
    url: "https://jsonplaceholder.typicode.com/users", 
    minLength: 1, 
    // 这里替换成你从数据库拿到的实际ID，比如Leanne Graham的ID是1
    selected: 1, 
    mapping: 'id', 
    selectHintOnEnter: true, 
    labelKey: (option) => `${option.name} ${option.username}`, 
  } 
}

额外注意事项 #

• 确保选项数据已加载：如果组件初始化时异步选项还没加载完成，可能会暂时显示为空，等选项加载完毕后组件会自动匹配ID并显示标签。如果需要强制立即匹配，可以在选项加载完成后再更新selected的值。
• 验证ID匹配：确认你传入的ID在异步返回的选项数组中存在对应的项，否则组件还是无法找到匹配项。
• 关于labelKey：你的labelKey是函数，只要选项数据正确加载，组件会用这个函数渲染对应的显示文本，不需要额外调整。

这样修改后，表单加载时就能根据存储的ID正确显示对应的用户标签了。

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