Question

完整代码here

我在未定义udpateShelf的过程中遇到错误，但是导入了Changeshelf并在函数中分配了属性，我很困惑，为什么我仍然会出现未定义的错误？如果有人能更好地解释这一点，我觉得我不太了解React如何通过组件传递道具，我认为这将有助于我为此应用创建不同的组件或功能。

Bookshelf.js

ul

Changeshelf.js

import React, { Component } from 'react'
import * as BooksAPI from './BooksAPI'
import PropTypes from 'prop-types'
import Books from './Books.js'
import logo from '../icons/logo.svg'
import { Link } from 'react-router-dom'
import ChangeShelf from "./ChangeShelf.js"

const shelves = [
  { key: 'currentlyReading',
    name: 'Currently Reading' },
  { key: 'wantToRead',
    name: 'Want to Read' },
  { key: 'read',
    name: 'Read' }
]

export default class Bookshelf extends Component {

static propTypes = {
  book: PropTypes.object.isRequired,
  books: PropTypes.array.isRequired,
  updateShelf: PropTypes.func.isRequired
}

render() {
  const { book, books, shelfkey } = this.props;

  return (

  <div className="list-books">
      <div className="react-app">
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">React bookshelf app</h1>
        </header>
      </div>

        <div className="list-books-title">
          <h1>my bookshelf</h1>
        </div>

    <div className="list-books-content">
      {shelves.map(shelf => (
        <div key={ shelf.key } className="bookshelf">
          <h2 className="bookshelf-title">{ shelf.name }</h2>

          { updateShelf(shelfkey).length === 0 ?
            (<div>no books on this shelf</div>)
            :
            (<div className="bookshelf-books">
                <ol className="books-grid">
                  <li>
                    {updateShelf(shelf.key).map(book => (
                      <Books
                        book={book}
                        books={books}
                        key={book.id}
                        onupdateShelf={this.UpdateShelf}
                      />
                    ))}
                  </li>
                </ol>
            </div>
            )
          }

        </div>
      ))}
      <Link to="/search" className="open-search">Add a book</Link>
    </div>
  </div>

    )
  }
}

Answer 1

我会尽力解释;）

组件App

加载书本并保存数据；
渲染器使用导入的组件<Bookshelf />;
书架将this.state.books作为books的道具，而不存在（在App中）处理程序/方法this.updateShelf作为onUpdateShelf的道具；

您可以在Bookshelf和this.props.books中使用它们。这是按属性传递处理程序。它从子级在父级中调用方法。 调用方法，异步进程通常以新状态（setState）结尾，该状态强制重新渲染（更新传递给孩子的道具）。

为简便起见，this.props.onUpdateShelf（在渲染中）可以由本地标识符const { book, books, shelfkey } = this.props;（而非book），this.props.book，books使用这些道具。

问题：

没有通过shelfkey；
没有通过book；
根据需要缺少shelfkey定义的book和updateShelf（我们有propTypes，但传递了未定义的缺失方法）；
< / li>
onUpdateShelf未定义，未传递（应为updateShelf），未本地定义（应为this.props.updateShelf）；
this.updateShelf在那里（预期）用作fn返回数组，而在updateShelf中用作事件处理程序；

您可以将ChangeShelf的方法从updateShelf移到ChangeShelf，并在需要时将其作为道具传递给书架，搜索和更深层次的内容。

反应未定义的错误

1 个答案: