例如，如何将字符串形式的已解析承诺对象映射到按钮上

Question

我知道有很多类似的现有问题，但对于我的案例来说，没有一个真的足够简单。这是我现在的承诺的行为：至少在第 62 和 63 行，我们可以通过控制台看到正在找到准确和正确的值。我的目标是将其作为值传递给someVar或以其他方式使用更新后的值更新第 70 行。就目前而言，我的按钮只是呈现Object [Promise]并且在承诺解决后不会改变。这基本上是我写过的第一个 promise 函数，老实说我很迷茫，尽管其他人的一些详细解释我认为超出了我需要知道的为 api 调用构建一个简单的 promise 的范围。

Answer 1

渲染组件是同步的。如果你想做一些异步的事情，你的组件中需要一个状态变量。在第一次渲染时它将是空的，您可能会渲染一些占位符视图，例如加载微调器。然后你将开始异步的东西，当它完成时你设置状态使其再次呈现。

function NewButton({redirectId}){

  const classes = useStyles();

  const [someVar, setSomeVar] = useState(null);

  useEffect(() => {

    indexSearch(redirectId).then(result => {

      setSomeVar(result);

    }) 

  }, [])

  if (!someVar) {

    return null;

  }

  return(

      <Link as={`/details/${redirectId}`} href={`/details?objectId=${redirectId}`}>

          <a>

              <button type="button" className={classes.root}>

                  {`Learn more about the ${someVar}`}

              </button>

          </a>

      </Link>

  )

}