मैं ReactJS का उपयोग करके और एक API लिंक से परिणाम प्राप्त करने के लिए एक लाइवसर्च इंजन विकसित कर रहा हूं। मुझे यह कहते हुए संकलन में त्रुटि आती है लेखन त्रुटि: Books.map कोई फ़ंक्शन नहीं है

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>
  );
}


यह उस त्रुटि का उत्पादन क्यों करता है? मैं उत्पन्न त्रुटि को ठीक करना चाहता हूं जो कोड उत्पन्न करता है और लाइव खोज करने में सक्षम होता है

मैं उपरोक्त निम्नलिखित कोड के साथ काम कर रहा हूं:

0
Carl 4 जुलाई 2019, 18:52

1 उत्तर

सबसे बढ़िया उत्तर

आपने शुरू में books को एक खाली स्ट्रिंग पर सेट किया है।

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

सरणी में बदलें।

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

map है एक सरणी विधि। तो जब आप स्ट्रिंग के रूप में books की प्रारंभिक स्थिति सेट करते हैं तो आपको त्रुटि मिल जाएगी।

1
anonymous 4 जुलाई 2019, 16:35