如果在promise中满足条件,则不要第二次执行then()

时间:2020-09-28 17:05:43

标签: javascript reactjs promise

如果object.map((object, index) => { return ( <> {index === 0 && ( <div className="main-image" > {<img>} </div> )} {index > 1 && ( <div className="main-videos"> {<video>} </div> )} </> ); })} What I basically want to do is this: object.map((object, index) => { return ( <> {index === 0 && ( <div className="main-image" > {<img>} </div> )} {index === 1 && (<div className="main-videos">)} {index > 1 && (<video>)} {index === object.length && (</div>)} </> ); })} 之后,我必须停止执行下面的代码,我们进入了该方法。有没有办法做到这一点?

import React, { useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles({
  root: {
    minWidth: 275
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)"
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12
  }
});

export default function OutlinedCard() {
  const refs = useRef([]);
  const classes = useStyles();
  
  const click = (event) => {
    const { currentTarget: { id = "" } = {} } = event;
    const clickedCard = refs.current[id]; // This is the card whose button got clicked
    console.log(clickedCard);
  };

  const createRefs = (id, node) => (refs.current[id] = node);

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent ref={(node) => {createRefs('card_1', node)}}>
        <Typography>ID: '1'</Typography>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <Typography>Name: 'RAAM'</Typography>
        <Typography>Blood group: 'AB+'</Typography>
        <Typography>"Patient Ram is having bloodgroup AB+"</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" id="card_1" onClick={click}>
          Edit
        </Button>
      </CardActions>
      <CardContent ref={(node) => {createRefs('card_2', node)}}>
        <Typography>ID: '2'</Typography>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <Typography>Name: 'RAAM'</Typography>
        <Typography>Blood group: 'AB+'</Typography>
        <Typography>"Patient Ram is having bloodgroup AB+"</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" id="card_2" onClick={click}>
          Edit
        </Button>
      </CardActions>
    </Card>
  );
}

2 个答案:

答案 0 :(得分:2)

您可以将Traceback (most recent call last): File "/Volumes/GoogleDrive/Ortak Drive'lar/Arga Tek/Tunahan/Projeler/ProjeCafeDeneme/garsonekle.py", line 7, in <module> garsonislem.garson_ekle(garson_sira,garson_isim,res_adr) #garson eklemek için File "/Volumes/GoogleDrive/Ortak Drive'lar/Arga Tek/Tunahan/Projeler/ProjeCafeDeneme/garsonislem.py", line 17, in garson_ekle res_ekle(garson_sira,garson_isim,res_adr) File "/Volumes/GoogleDrive/Ortak Drive'lar/Arga Tek/Tunahan/Projeler/ProjeCafeDeneme/garsonislem.py", line 48, in res_ekle gorunur_yap(garson_sira,garson_isim) File "/Volumes/GoogleDrive/Ortak Drive'lar/Arga Tek/Tunahan/Projeler/ProjeCafeDeneme/garsonislem.py", line 81, in gorunur_yap contents = r.sub(r'r: "none"(?=[^{}]+i: "garson2")','r: "inline"',contents) TypeError: 'str' object cannot be interpreted as an integer 移到要应用的行内:

then

答案 1 :(得分:1)

您可以throwPromise.reject忽略then函数,而转到catch进行处理。

        let arkIsEnabled = true;

        let callBackHasToStop = async () => new Promise(resolve => resolve(1))
            .then(r => {
                console.log(r);

                if (arkIsEnabled) {
                    throw "error";
                }

                //do st
                return   ++r;
            })
            .then(r => {
                console.log(r);

                //do st
                return ++r;
            })
            .catch(e => {
                //check error here. If it is thrown from arkIsEnabled. Stop!
                console.log(e);
                if (e === "error")
                    return;

                //do st
                console.log('last dispatch error');
            });


// Other case
        let otherArkIsEnabled = false;

        let callBackHasNotToStop = async () => new Promise(resolve => resolve(1))
            .then(r => {
                console.log(r);

                if (otherArkIsEnabled) {
                    throw "error";
                }

                //do st
                return   ++r;
            })
            .then(r => {
                console.log(r);

                //do st
                return ++r;
            })
            .catch(e => {
                //check error here. If it is thrown from arkIsEnabled. Stop!
                console.log(e);
                if (e === "error")
                    return;

                //do st
                console.log('last dispatch error');
            });

        let call = async () => {
            await callBackHasNotToStop();
            console.log('-------');
            console.log('2 will not return');
            await callBackHasToStop();
        };

        call();