React中如何通过Props结合if/else转换API返回的语言标识？

你的问题出在两个核心点：

1. 函数组件中不存在this上下文，使用this.state会直接导致报错崩溃。
2. 在BookModal的props中直接放置立即执行函数是错误语法，React组件props必须遵循key={value}的格式。

下面是几种正确的实现方式：

方式一：三元表达式直接处理（最简洁） #

直接在language属性值中写入判断逻辑，替换原错误写法：

const BookCard = () => {
  const { results, addBooktoArray, addLastReadBook } = useContext(BookContext);

  return (
    <>
      {results.map((book) => (
        <Grid key={book.id} id={book.id}>
          <Card sx={{ width: 350, height: 700 }}>
            {/* Cover */}
            <CardMedia
              component="img"
              alt={book.title}
              height="75%"
              image={`https://www.gutenberg.org/cache/epub/${book.id}/pg${book.id}.cover.medium.jpg`}
            />

            <CardContent>
              {/* Booktitle */}
              <Typography
                variant="h5"
                noWrap
                sx={{
                  p: 1,
                  fontWeight: 600,
                  color: "inherit",
                  textDecoration: "none",
                }}
              >
                {book.title}
              </Typography>
              {/* Author */}
              <Typography
                variant="subtitle1"
                noWrap
                sx={{
                  p: 1,
                  color: "inherit",
                  textDecoration: "none",
                }}
              >
                by {book.authors[0] ? book.authors[0].name : "Unknown Author"}
              </Typography>
              <CardActions>
                <BookModal 
                  title={book.title}
                  author={book.authors[0]?.name || "Unknown Author"}
                  subjects={book.subjects}
                  // 处理语言转换，注意API返回的languages是数组，取第一个元素判断
                  language={book.languages[0] === "en" ? "English" : book.languages[0]}
                  description={book.title}
                />
                <Link
                  to={`/Reader/${book.id}`}
                  onClick={(e) => createBook(book)}
                >
                  <Button size="medium" onClick={addLastReadBook}>
                    READ
                  </Button>
                </Link>
                <Tooltip title="Add to Bookshelf">
                  <IconButton onClick={addBooktoArray}>
                    <BookmarkAddIcon />
                  </IconButton>
                </Tooltip>
              </CardActions>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </>
  );
};

export default BookCard;

方式二：提取辅助函数（适合多语言扩展） #

如果后续需要支持更多语言转换，把逻辑提取为单独函数更易维护：

const BookCard = () => {
  const { results, addBooktoArray, addLastReadBook } = useContext(BookContext);

  // 辅助函数：转换语言标识为显示文本
  const formatLanguage = (langCode) => {
    switch(langCode) {
      case "en":
        return "English";
      case "zh":
        return "中文";
      // 可按需添加更多语言规则
      default:
        return langCode;
    }
  };

  return (
    <>
      {results.map((book) => (
        <Grid key={book.id} id={book.id}>
          <Card sx={{ width: 350, height: 700 }}>
            {/* 省略其他重复代码 */}
            <CardActions>
              <BookModal 
                title={book.title}
                author={book.authors[0]?.name || "Unknown Author"}
                subjects={book.subjects}
                language={formatLanguage(book.languages[0])}
                description={book.title}
              />
              {/* 省略其他重复代码 */}
            </CardActions>
          </Card>
        </Grid>
      ))}
    </>
  );
};

export default BookCard;

额外注意事项 #

• 原代码中同时出现book.language和book.languages，结合API返回格式推测languages是数组（如["en"]），因此需要取第一个元素book.languages[0]进行判断。
• 对book.authors[0].name添加可选链?.和默认值，避免当authors为空时触发报错。

内容的提问来源于stack exchange，提问作者user20047387