函数在三元表达式中返回 Promise 不起作用 React

Question

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

这里是 permCheck() 函数，它可以正常执行 return 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 应用程序的 return 中，我试图根据 permCheck 函数更改内容。这是它似乎总是默认为三元表达式的第一部分的地方。如您所见，我什至在三元表达式中有一个 console.log，它正确地 return 为真或假。

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>

);

Answer 1

我写了一个答案，因为我的评论难以辨认。我认为你的函数 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
      });

对 return 值没有影响。

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

function permCheck(res) {
  let isMember;
  return axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) => {
    axios
      .get("https://jsonplaceholder.typicode.com/todos/2")
      .then((res) => {
        return res.data; // This will be true or false
      });
    isMember = res.data;
    return isMember;
  });
}

permCheck().then(data=>console.log(data))

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

Answer 2

您无法检查您只会在未来收到的值，因此您不能只是打开您的承诺。

相反，您应该使用状态变量来存储结果，并在可用时重新呈现您的组件。在那之前，您可以呈现一些加载 effect/spinner/text，以通知用户。

假设您使用的是功能组件，它看起来像这样：

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>
  )
}

函数在三元表达式中返回 Promise 不起作用 React

Function returning Promise in ternary expression not working React

javascript

conditional-operator

reactjs