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

Question

我知道有很多类似的现有问题，但对于我的情况来说，没有一个真的足够简单。

这是我 promise 的行为:

至少在第 62 和 63 行，我们可以通过控制台看到正在找到准确且正确的值。我的目标是要么将其作为值传递给 someVar，要么以其他方式用更新后的值更新第 70 行。

就目前而言，我的按钮只是呈现 Object [Promise] 并且在 promise 已解决后不会更改。

这基本上是我编写的第一个 promise 函数，老实说我很迷茫，尽管我认为其他人的一些详细解释超出了我为 api 调用构建简单 promise 所需的知识.

完整代码:

import React from 'react';
import {Highlight} from "react-instantsearch-dom";
import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Link from 'next/link';
import {makeStyles} from "@material-ui/styles";
import '../static/default.css';
import algoliasearch from "algoliasearch";

const searchClient = algoliasearch(
    **************************
);

const index = searchClient.initIndex("Parks");

const useStyles = makeStyles({
    root: {
        background: 'linear-gradient(45deg, #4496DB 30%, #5df78e 90%)',
        border: 0,
        fontSize: 16,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        width: "100%",
        padding: '0 30px',
    },
    card: {
        minWidth: 275,
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
});

function indexSearch(objId){
    return new Promise((resolve, reject) => {
        index.getObject(objId, ['fullName'], (err, content) => {
            if (content != null){
                resolve(content.fullName);
            }
            else{
                reject(Error());
            }
        });
    });
}

function NewButton({redirectId}){
    const classes = useStyles();
    var someVar = indexSearch(redirectId).then(function(result){
        console.log(result);
        return result;
    }).catch(function rejected() {console.log('rejected')});
    console.log('after' + someVar);
    return(
        <Link as={`/details/${redirectId}`} href={`/details?objectId=${redirectId}`}>
            <a>
                <button type="button" className={classes.root}>
                    {`Learn more about the ${someVar}`}
                </button>
            </a>
        </Link>
    )
}

class Hit extends React.Component{

    render() {
        const props = this.props;
        return(

            <Card>
                <Paper id="paper" square>
                    <Typography id="title" color="textPrimary" variant="h6">
                        <Highlight className="ais-Highlight-header" attribute="fullName" hit={props.hit}/>
                        <Highlight className="ais-Highlight-state" attribute="states" hit={props.hit}/>
                    </Typography>
                </Paper>
                <Paper square>
                    <Typography color="textSecondary" variant="h6">
                        <Highlight attribute="description" hit={props.hit}/>
                    </Typography>
                </Paper>
                <NewButton redirectId={props.hit.objectID}/>
            </Card>
        )
    }
}

export default Hit;

Answer 1

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

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