如何在反应管理员中显示我的异步请求？

Question

如何在react admin（函数字段）中显示我的异步请求？我的要求是正确的。但是我有以下错误：错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。

我刚开始使用 react-admin，我不知道如何解决这个错误。你能帮助我吗？如何在反应管理员（功能字段）中显示我的异步请求？我的要求是正确的。但是我有以下错误：

export const TreeList = props => (
    <ListGuesser {...props}>
        <FieldGuesser source={"code"} />

        <FunctionField
            label="Image"
            render={
                async (record) => {
                        let content = ''
                let response = await fetch('https://nuxt-api.io.local/api/media_objects')
                   
                    const res = await response.json()
                     content = res['hydra:member'].find(value => { return value['@id'] === record.outlinedImage }).contentUrl || ''


                    return (
                    <img width="100"
                         src={`https://nuxt-api.io.local${content}`} alt="Upload image"
                    />
                );
            }}
        />
    </ListGuesser>
);

Answer 1

试试这个选项：

const TreeList = (props) => (
  <List {...props}>
      <Datagrid>          
        <MyImageField />
      </Datagrid>
  </List>
)


const MyImageField = (props) => {
  const record = useRecordContext(props)
  const [imageUrl, setImageUrl] = useState('')

  useEffect(() => {
    (async (rec) => {
      let content = ''      
      try {
        const response = await fetch('https://nuxt-api.io.local/api/media_objects')
        const res = await response.json()
        content = res['hydra:member'].find(value => { return value['@id'] === rec.outlinedImage }).contentUrl || ''
      } catch (error) {
        console.warn('MyImageField error:', error)
      }
      setImageUrl(`https://nuxt-api.io.local${content}`)
    })(record)
  }, [record, setImageUrl])

  return <img width="100" src={imageUrl} alt="Upload image" />
}

如何在反应管理员中显示我的异步请求？

How to display my async request in react admin?

reactjs

async-await

react-admin