Question

我正在学习反应。

我正在研究Myreads图书应用项目。我的应用程序一开始呈现的很好，但是当我单击select标签时，我得到了上面的错误消息。

我本来以为是一个“ propTypes”问题，然后继续安装prop-types，但仍然无法正常工作。

这是我的cmp发生错误，而我的父cmp定义了我的方法：

// child component

import React from "react";
import Icon from "./icons/add.svg";
import SearchBar from "./SearchBar";

class Book extends React.Component {
  render() {
    return (
      <div className="book">
        <div className="book-top">
          <div
            className="book-cover"
            style={{
              width: 128,
              height: 193,
              backgroundImage: `${
                this.props.book.imageLinks
                  ? "url(this.props.book.imageLinks.thumbnail)"
                  : "Icon"
              }`
            }}
          />
          <div className="book-shelf-changer">
            <select
              onChange={event =>
                this.props.moveShelf(this.props.book, event.target.value)
              }
              value={this.props.book.shelf}
            >
              <option value="move" disabled>
                Move to...
              </option>
              <option value="currentlyReading">Currently Reading</option>
              <option value="wantToRead">Want to Read</option>
              <option value="read">Read</option>
              <option value="remove">Remove</option>
            </select>
          </div>
        </div>
        <div className="book-title">{this.props.book.title}</div>
        <div className="book-authors">{this.props.book.authors}</div>
      </div>
    );
  }
}

export default Book;

以及定义方法的父组件：

// parent component

import React from "react";
import SearchBar from "./SearchBar";
import MainPage from "./MainPage";
import { Route } from "react-router-dom";
import "./App.css";
import * as BooksAPI from "./BooksAPI";

class BooksApp extends React.Component {
  constructor(props) {
    super(props);
    this.moveShelf = this.moveShelf.bind(this);
    this.state = {
      books: [],
      query: "",
      searchedBooks: []
    };
  }

  componentDidMount() {
    BooksAPI.getAll().then(books => {
      this.setState({ books: books });
    });
  }

  moveShelf = (book, shelf) => {
    BooksAPI.update(book, shelf); //call update method here to stack books
    BooksAPI.getAll().then(books => {
      //to have books update dynamically -->
      this.setState({ books: books });
    });
  };

  updateQuery = query => {
    this.setState({
      query: query
    });
    this.updateSearchedBooks(query);
  };

  updateSearchedBooks = query => {
    query
      ? BooksAPI.search(query).then(searchedBooks => {
          /*fetch searchedbooks using the method defined in BooksAPI */
          searchedBooks.error
            ? this.setState({ searchedBooks: [] })
            : this.setState({ searchedBooks });
        })
      : this.setState({ searchedBooks: [] });
  };

  render() {
    return (
      <div className="app">
        <Route
          exact
          path="/"
          render={() => (
            <MainPage
              books={this.state.books} //calling all my books
              moveShelf={this.moveShelf}
            />
          )}
        />

        <Route
          path="/search"
          render={() => (
            <SearchBar
              searchedBooks={this.state.searchedBooks}
              moveShelf={this.moveShelf}
            />
          )}
        />
      </div>
    );
  }
}

export default BooksApp;

Answer 1

我猜您不会在Action: send text Regular expression: ^\[(sudo)\]\s(password)\s(for)\s($EffectiveUsername$)\:\s$(?!.)(?!\n) Parameters: $EffectivePassword$\n Enable "Instant" checkbox Click add Regular expression made for common linux sudo prompt, and will start to work in next connection.和/或moveShelf内部将Book传递给MainPage。

将SearchBar定义为箭头函数this.moveShelf = this.moveShelf.bind(this);

时不需要

_this2.props.moveShelf不是函数

1 个答案: