如何修复TypeError:books.s.map不是我的代码生成的函数

Question

我正在使用ReactJS开发Livesearch引擎，并从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>
  );
}

为什么会产生该错误？我希望纠正代码产生的生成错误＆amp;能够进行实时搜索

我一直在处理以下代码

Answer 1

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

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

更改为数组。

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

map是一个数组方法。因此，当您将books的初始状态设置为字符串时，您将获得错误。