React jsx没有在异步函数中返回我的按钮答案

【问题标题】：React jsx not returning my button in async functionReact jsx没有在异步函数中返回我的按钮
【发布时间】：2023-03-10 07:53:01
【问题描述】：

  const addButtons = (x) => {
      (async () => {
          let userHasCon = await axios.get(`route`);
          if (userHasCon.data[0].Users_Id == userId) {
            console.log(userHasCon.data[0].Users_Id)
            return <button>Remove</button>
          }
      })()
  }

起初我将 addButtons 函数设为异步，但结果出错。所以我做了一个匿名异步函数来等待我的 api 调用。我遇到的问题是在匿名异步函数中返回 jsx 这可能吗？

【问题讨论】：

为什么不使用 state 加载数据时只显示按钮？
@kevin 该按钮将用于删除评论。只有评论的作者才能删除它，这就是为什么如果登录用户是作者，我会检查并显示按钮。

标签： reactjs async-await

【解决方案1】：

如果你调用这个函数，它不会返回任何东西。它实际上是未定义的，因为没有 return 语句。

我实际上会用 state 和 useEffect 解决你的问题：

 import React from 'react'
    
    export default function CustomSelectNew() {
    
        const [userHasCon,setUserHasCon] = useState();
    
        useEffect( async ()=> {
            const data = await axios.get('route');
            setUserHasCon(data);
        },[])
    
    
        return (
            <div>
                {userHasCon.data[0].Users_Id === userId && (
                    <button>Remove</button>
                )}
            </div>
        )
    }


How about something like this instead?

【讨论】：

我正在尝试在同一个组件和一个新组件中创建一个功能。看到您的代码后，我更改了方法，现在将 id 作为返回值，并比较 2 个 id 的我想要放置按钮的位置。