Javascript 三元表达式中的函数返回承诺不起作用

我有一个名为

permCheck（）

的函数，它将根据某些逻辑解析为true或false。我需要从中获取值，并在三元表达式中使用它来更改用户看到的内容。但是，它似乎总是返回表达式的真实部分，即使

permCheck（）

为false

下面是

permCheck（）

函数，它正确返回

true

或

false

：

function permCheck(res) {
  let isMember;
  return axios.get(window.location.origin + "/username").then((res) => {
    axios
      .get(
        "https://api.endpoint.com/ismember/" +
          res.data
      )
      .then((res) => {
        return res.data; // This will be true or false
      });
    isMember = res.data;
    return isMember;
  });
}

然后，作为react应用程序的回报，我试图根据

permCheck

功能更改内容。这似乎总是默认为三元表达式的第一部分。正如您所看到的，我甚至在三元表达式中有一个

console.log

，它正确地返回true或false

return (
<div className="ui">
  <AppLayout
    content={
      permCheck().then((a) => {
        console.log("IN TERNARY: " + a);
        Promise.resolve(a);
      })
        ? appContent
        : accessDenied
    } // Here we expect true or false from permCheck()
    navigation={<ServiceNavigation />}
    notifications={<FlashMessage />}
    breadcrumbs={<Breadcrumbs />}
    contentType="table"
    tools={Tools}
    headerSelector="#navbar"
    stickyNotifications={true}
  />
</div>

返回(
{
console.log（“三元：+a）；
承诺。决议（a）；
})
? 应用内容
：访问被拒绝
}//这里我们期望permCheck（）的值为true或false
导航={}
通知={}
面包屑={}
contentType=“表格”
工具={tools}
headerSelector=“#导航栏”
粘滞通知={true}
/>

---

))

我写答案是因为我的评论难以辨认。 我认为您的函数

permCheck

相当于

function permCheck(res) { 
  let isMember; 
  return axios.get(window.location.origin + "/username").then((res) => { 
    isMember = res.data; 
    return isMember; 
  }); 
} 

角色

axios.get(
        "https://api.endpoint.com/ismember/" +
          res.data
      )
      .then((res) => {
        return res.data; // This will be true or false
      });

在返回值中没有效果

这里有一个例子。如您所见，记录的资源是第一个，而不是第二个

函数permCheck（res）{
让我成为会员；
返回axios.get（“https://jsonplaceholder.typicode.com/todos/1）然后（（res）=>{
axios
.get（“https://jsonplaceholder.typicode.com/todos/2")
。然后（（res）=>{
return res.data；//这将是true或false
});
isMember=资源数据；
返回isMember；
});
}
permCheck（）.then（data=>console.log（data））

---

你不能检查你只会在将来收到的价值，所以你不能只是打开你的承诺

相反，您应该使用一个状态变量来存储结果，并在组件可用时重新启动它。在此之前，您可以呈现一些加载效果/微调器/文本，以通知用户

假设您使用的是一个功能组件，它将如下所示：

function component(){
  const [permission, setPermission] = useState(undefined)
  //Use `useEffect` to prevent recurring checking
  useEffect(() => {
    permCheck().then((a) => {
      //Update (rerender) the component with the permission info
      setPermission(a)
    })
  }, [])
  return (
  <div className="UI">
    <AppLayout
      content={
        //When this runs for the first time, `permission` will be `undefined` (meaning 'not available'), so handle this case as well:
        permission === undefined
          ? 'Checking permission, hang on...'
          : permission
            ? appContent
            : accessDenied
      }
      navigation={<ServiceNavigation />}
      notifications={<FlashMessage />}
      breadcrumbs={<Breadcrumbs />}
      contentType="table"
      tools={Tools}
      headerSelector="#navbar"
      stickyNotifications={true}
    />
  </div>
  )
}

函数组件（）{
const[permission，setPermission]=useState（未定义）
//使用“useEffect”可防止重复检查
useffect（（）=>{
permCheck（）。然后（（a）=>{
//使用权限信息更新（重新提交）组件
设置权限（a）
})
}, [])
返回(
)
}

你有一个像承诺这样的表达方式吗？appContent:accessDenied。PROMISE不是虚假的（它不是未定义的或null或0等），因此无论permCheck函数返回什么，它都默认为三元运算符的第一个值。permCheck函数与函数permCheck（res）等价（作为返回值）{let isMember；return axios.get（window.location.origin+“/username”）。然后（（res）=>{isMember=res.data；return isMember；}）；}@Virtuoz克服此问题的最佳方法是什么？我不知道如何返回此结果。使用状态变量（

useState

或

this.state

）跟踪过程，并在承诺完成后用结果更新它（

.then（）

）。在此之前，请渲染一些加载微调器或类似的内容。第二个axios.get使用第一个中的值来调用我们使用的API，该API返回true或false。这就是实际提供true/false的axios调用。但您的函数中不返回该值。您不能从这样的承诺中返回变量！您将得到一个其他承诺！我添加了一个示例来展示我所缺少的行为……非常感谢。