Question

我正在使用此应用程序，当我运行npm start时，我不断收到此错误“ TypeError：render不是一个函数”。我已经厌倦了从删除依赖项到运行package main import ( "fmt" ) func MyFunc1() { fmt.Println("I am Masood") } func MyFunc2() { fmt.Println("I am a programmer") } func MyFunc3() { fmt.Println("I want to buy a car") } func main() { for _, fn := range []func(){MyFunc1, MyFunc2, MyFunc3} { fn() } }的所有工作。我什至多次更新react-router-dom和react-dom。我在这里迷路了。

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

以下是代码：

index.js

npm install

App.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

Provider / index.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

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

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

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

Local_Host_Error，Local_Host_Error，Local_Host_Error

Answer 1

在App.js中，您的消费者只说“上下文”。我认为您的意思是使它成为保存来自提供程序的数据的变量。现在，它只是作为一个字符串读取，而render函数却异常运行，因为...嗯，日志记录不是很好。简而言之，当组件进行渲染时，它会碰到很多未定义的内容，并且会吓跑。

要解决此问题，请执行以下操作：

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

反应路由器：TypeError：渲染不是函数

1 个答案: