Question

常规渲染按钮不起作用

我试图更改按钮的状态，而是添加另一个组件，但是没有一个起作用

    /// This is the button component


   const AddToList: React.FC<IAddToListProps> = (props) => {
   let [showBtn, setShowBtn] = useState(true);
     const classes = useStyles(props);
     let addToList = () => {
    fetch(`http://127.0.0.1:3000/${props.action}/${props.id}`, {method: 
 'post'})
         .then((response) => {
         console.log(response);
     });
   }
return (
  <div>
    {
      showBtn ?
      <Button
      onClick={addToList}
      variant="contained" 
      color="primary" 
      className={classes.button}>
        {props.label}
      </Button>
      : null
    }
</div>
    );



   //This is the movieCard component


   export default function MovieCard() {
const [movieTitle, setMovieTitle] = useState('lorem ipsum');
const [year, setYear] = useState('1999');

const classes = useStyles();

return (
    <Card className={classes.card}>
        <CardActionArea>
            <CardMedia
                className={classes.media}
                image='#'
                title="anotherTitle"
            />
            <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                    {movieTitle}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    {year}
                </Typography>
                <AddToList 
                id={10} 
                label={'Add To Watch'} 
                action={'towatch'}
                />
                <AddToList 
                id={10} 
                label={'Add To Seen'} 
                action={'watched'} />
            </CardContent>
        </CardActionArea>
        <CardActions>

        </CardActions>
    </Card>
);

预期结果：当我单击“添加到观看”按钮时，必须删除“添加到观看”，并且必须在“从观看列表中删除”中转换“添加到观看”

Answer 1

我会在逻辑和表示之间划分代码。由于您已经重用了AddToList，它只是一个可视组件，不应包含任何逻辑。

因此，我将所有逻辑移至一个组件，然后使用该状态呈现正确的表示形式：

const AddToList: React.FC<IAddToListProps> = props => {
  const classes = useStyles(props);
  return (
    <div>
        <Button
          onClick={props.onClick}
          variant="contained"
          color="primary"
          className={classes.button}
        >
          {props.label}
        </Button>
    </div>
  );
};

使用此方法，您可以提供单击按钮时调用的任何功能，并且具有可在其他任何地方重用的多功能组件。因此，更通用的名称可能会有用。

export default function MovieCard() {
  const [movieTitle, setMovieTitle] = useState("lorem ipsum");
  const [year, setYear] = useState("1999");

  const [watched, setWatched] = useState(false);

  const classes = useStyles();

  const addToList = (action, id) => {
    fetch(`http://127.0.0.1:3000/${action}/${id}`, {
      method: "post"
    }).then(response => {
      console.log(response);
    });
  };

  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia className={classes.media} image="#" title="anotherTitle" />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {movieTitle}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {year}
          </Typography>
          {!watched && (
            <AddToList
              label={"Add To Watch"}
              onClick={() => { addToList("towatch", 10); setWatched(true)} }
            />
          )}
          {watched && (
            <AddToList
              label={"Add To Seen"}
              onClick={() => addToList("watched", 10)}
            />
          )}
        </CardContent>
      </CardActionArea>
      <CardActions />
    </Card>
  );
}

您可以看到MovieCard现在正在处理调用后端函数的整个逻辑，并且还关心显示正确的按钮。有了这个基本思想，您可以通过加载正确的watched状态而不是从false或其他任何东西开始而取得更大的进步。

更改按钮状态

1 个答案: