javascript - react 路由器 : TypeError: render is not a function

Question

我正在开发这个应用程序，当我运行 npm start 时，我不断收到此错误“TypeError:渲染不是函数”。我已经厌倦了从删除依赖项到运行 npm install 的一切。我什至多次更新react-router-dom和react-dom。我在这里迷路了。

这是存储库的 GitHub https://github.com/Drayz/My-Book-Reads-App.git

这是代码:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
); enter code here

应用程序.js:

import React from 'react'
import { Switch,Route } from 'react-router-dom'
import Homepage from './windows/Homepage'
import Search from './windows/Search'
import Provider, {MyContext} from './Provider/'
import './App.css'

class BooksApp extends React.Component {

  render() {
    return (
      <div className="app">
      <Provider>
        <MyContext.Consumer>
            context
          <Switch>
            <Route exact path={"/"} render={ () => (
              <MyContext.Consumer>
                {context => <Homepage {...context} />}
              </MyContext.Consumer>
            )}/>
            <Route exact path={"/search"} render={ () => (
              <MyContext.Consumer>
                {context => <Search {...context} />}
              </MyContext.Consumer>
            )}/>
          </Switch>
        </MyContext.Consumer>
      </Provider>
      </div>
    )
  }
}

export default BooksApp

提供商/index.js:

import React, { Component } from 'react';
export const MyContext = React.createContext();

export default class index extends Component {
  constructor() {
    super();
    this.state ={
      books:[],
      currentlyReading:[],
      wantToRead:[],
      read:[],
      addBooks: books => {
        const currentlyReading = books.filter(book => book.shelf === 'currentlyReading');
        const read = books.filter(book => book.shelf === 'read');
        const wantToRead = books.filter(book => book.shelf ==='wantToRead');
          this.setState({ books, currentlyReading, read, wantToRead });
      },
        moveBook: (book, newShelf, allShelfs) => {
          console.log(newShelf);
          const newBooks = this.state.books.map(allBooks => {
            const foundID = allShelfs[newShelf].find(
              bookID => bookID === allBooks.id
            );
            if (foundID) {
              allBooks.shelf = newShelf;
            }
            return allBooks;
          });
          this.state.addBooks(newBooks);
        }
     };
  }
  render() {
     return (
       <MyContext.Provider value={{...this.state}}>
          {this.props.children}
       </MyContext.Provider>
    )
  }
}

SearchBook.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom'

export default class Searchbooks extends Component {
  render() {
     return (
       <div className="open-search">
         <Link to={'/search'}>
          Add a book
         </Link>
       </div>
    )
  }
}

书架.js

import React, {Component} from 'react';
import Book from './Book';

export default class Bookshelf extends Component {
  render() {
     return (
       <div className="bookshelf">
        <h2 className="bookshelf-title">{this.props.title}</h2>
        <div className="bookshelf-books">
          <ol className="books-grid">
              {this.props.books &&
                this.props.books.map(book => <Book key={book.id} {...book} moveBook={this.props.moveBook} />)}
          </ol>
        </div>
       </div>
    )
  }
}

Book.js

import React, {Component} from "react";
import {update} from '../BooksAPI'

export default class Book extends Component {
  handleChange = async e => {
    e.presist()
    try {
      const shelf = e.target.value;
      const book = this.props;
      const result = await update(book, shelf);
      this.props.moveBook(book, shelf, result);
    } catch (error) {
      console.log(error)
    }
  };

  render() {
     return (
       <li>
         <div className="book">
           <div className="book-top">
             <div className="book-cover"
             style={{
               width: 128,
               height: 193,
               backgroundImage:`url(${this.props.imageLinks ? this.props.imagesLinks.thumnail : ''})`
              }}
             />
             <div className="book-shelf-changer">
               <select onChange={this.handleChange} value={this.props.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="none">None</option>
               </select>
             </div>
           </div>
           <div className="book-title">{this.props.title}</div>
           <div className="book-authors">{this.props.authors ? this.props.author[0] : 'No Author'}</div>
         </div>
       </li>
     )
  }
}

Local_Host_Error , Local_Host_Error , Local_Host_Error

Answer 1

在 App.js 中，您的消费者只需说“上下文”。我认为您的意思是作为保存来自提供者的数据的变量。现在它只是被作为字符串读取，渲染函数会崩溃，因为......日志记录不是很好。简而言之，当组件进行渲染时，它会遇到一大堆未定义的情况并崩溃。

要解决此问题:

{ context => {您的 switch 语句 }}