Блог

Я пытаюсь отобразить все реквизиты в пользовательском интерфейсе, однако я использую функцию без состояния и сопоставляю все реквизиты с HTML. У меня возникла эта проблема Uncaught TypeError: props.map is not a function . Кто-нибудь может сказать мне, как исправить эту ошибку. Я новичок в React, спасибо за вашу помощь.

 import React from 'react';

function CurrentlyRead(props) {
    
      props.map((prop) => {
        const title  = prop.title;
        const author = prop.author;
        const url    = prop.url;
        return (
        <div className="bookshelf-books">
            <ol className="book-grid">
                 <div className="book-cover" style={{
                  width: 128,
                  height: 193,
                  backgroundImage: url,
                }}>
                </div>
                <div className="book-shelf-changer">
                <select>
                    <option value="move" disabled> Move to ... </option>
                    <option value="currentReading">Currently reading</option>
                    <option value="read">Read</option>
                    <option value="none">None</option>
                </select>
                </div>
                    <div className="book-title">{title}</div>
                    <div className="book-authors">{author}</div>
            </ol>
        </div>  
    )}
    )
}
  

Реквизит — это не массив. Это объект. Таким образом, вы должны работать с реквизитом, как с объектом. В вашем случае я предпочитаю использовать деструктурирование реквизита. Также не забудьте экспортировать свою функцию

 import React from 'react';

function CurrentlyRead({ title, author, url }) {
        return (
        <div className="bookshelf-books">
            <ol className="book-grid">
                 <div className="book-cover" style={{
                  width: 128,
                  height: 193,
                  backgroundImage: url,
                }}>
                </div>
                <div className="book-shelf-changer">
                <select>
                    <option value="move" disabled> Move to ... </option>
                    <option value="currentReading">Currently reading</option>
                    <option value="read">Read</option>
                    <option value="none">None</option>
                </select>
                </div>
                    <div className="book-title">{title}</div>
                    <div className="book-authors">{author}</div>
            </ol>
        </div>  
    )
}