Question

我正在使用reactJS开发一个实时搜索引擎，并从API链接获取结果。我在编译时遇到错误，说TypeError: books.map is not a function

export function Books() {
  const classes = useStyles();

  const [bookName, setbookName] = React.useState('');

  const [query, setQuery] = React.useState('');

  const [books, getBooks] = React.useState('');

  const bookList = books.map((book) => (
      <li key={book.title}>{book.title}</li>
  ));


  const handleChange = e => {
    setbookName(e.target.value);
    setQuery(e.target.vale);
  }

  const search = query => {
    const url = `https://api.itbook.store/1.0/search/${query}`;
    const token = {};
    this.token = token;

    fetch(url)
      .then(results => results.json())
      .then(data => {
        if (this.token === token) {
          getBooks(data.results);
        }
      });
  };

  React.useEffect(()=>{
    search = "";
  });


  return(
    <Paper className={classes.root}>

      <Container maxWidth="lg">

        <form className={classes.container} encType="multipart/form-data">

          <TextField
            required
            id="standard-required"
            placeholder="Enter Book Name"
            label="Search for a Book"
            name="bookName"
            value={bookName}
            onChange={handleChange}
            className={classes.textField}
            multiline
            rowsMax="2"
          margin="normal"/>

          <ul>{bookList}</ul>

        </form>

      </Container>

    </Paper>
  );
}

为什么会产生该错误？我希望更正代码产生的错误并能够进行实时搜索

我一直在使用以下代码

Answer 1

您最初将books设置为空字符串。

const [books, getBooks] = React.useState('');

更改为数组。

const [books, getBooks] = React.useState([]);

map是一种数组方法。因此，当您将books的初始状态设置为字符串时，将会收到错误消息。

如何解决TypeError：books.map不是我的代码生成的函数？

1 个答案: