Question

我正在尝试将所有道具呈现到UI，但是，我使用了无状态功能并将所有道具映射到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>  
    )}
    )
}

Answer 1

道具不是数组。这是一个对象。因此，您应该像道具一样使用道具。在您的情况下，我更喜欢使用破坏道具的方法。也不要忘记导出功能

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

将渲染道具反应到UI并映射所有道具

1 个答案: