javascript - 反应路由器:TypeError:渲染不是函数
问题描述
我正在开发这个应用程序,当我运行 npm start 时,我不断收到这个错误“TypeError:render is not a function”。从删除依赖项到运行,我已经厌倦了一切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>
)
}
}
解决方案
在 App.js 中,您的消费者只说“上下文”。我认为您的意思是,它是保存来自提供者的数据的变量。现在它只是被读取为一个字符串,并且渲染函数吓坏了,因为......好吧,日志记录不是很好。简而言之,当组件要渲染时,它会遇到一大堆未定义的东西并吓坏了。
要解决此使用:
{ context => {
你的 switch 语句}}
推荐阅读
- react-native - Undefined 不是 React Native 中的对象
- visual-studio-code - 我如何通过移动箭头键(左和右)在 Visual Studio Code 中过滤建议提示内容
- ios - 在 ViewController 之间使用 instantiateViewControllerWithIdentifier 传递数据
- dart - 那2个点是什么意思?1和2有什么区别?
- c# - LoadHtml() 弄乱了 MathJax 语法
- r - 在函数调用 r 中出现错误:函数调用缺少参数
- c - 在 Visual Studio 上使用 Keccak 代码包
- wpf - Prism 7.1:没有合适的方法来覆盖方法 RegisterTypes 和 CreateShell
- android - 找不到 support-media-compat.aar
- python - 求解一阶 ODE,其中包含另一个 ODE(Python 中的 odeint / solve_ivp)