Reactjs 未调用React update state方法
我尝试制作的React应用程序有问题。该应用程序应该显示书架上的书籍列表,然后能够在书架之间移动书籍 我现在遇到的问题是,当选择工具架时,Reactjs 未调用React update state方法,reactjs,state,Reactjs,State,我尝试制作的React应用程序有问题。该应用程序应该显示书架上的书籍列表,然后能够在书架之间移动书籍 我现在遇到的问题是,当选择工具架时,updateself函数没有被调用,并且调用了onUpdateShelf,这是应该进行更改和更新状态的地方 我添加了console.log('Test')toupdateself,但单击下拉列表时在控制台中看不到任何内容 控制台中没有错误 App.js import React, { Component } from 'react' import ListBo
updateself
函数没有被调用,并且调用了onUpdateShelf
,这是应该进行更改和更新状态的地方
我添加了console.log('Test')
toupdateself
,但单击下拉列表时在控制台中看不到任何内容
控制台中没有错误
App.js
import React, { Component } from 'react'
import ListBooks from './ListBooks'
import * as BooksAPI from './utils/BooksAPI'
import { Route } from 'react-router-dom'
class BooksApp extends Component {
state = {
books: []
}
componentDidMount() {
BooksAPI.getAll()
.then((books) => {
this.setState(() => ({
books
}))
})
}
updateShelf = (book, shelf) => {
console.log('Test');
this.state.books.forEach(b => {
if(b.id === book.id && b.shelf !== book.shelf ) {
b.shelf = shelf
this.setState((currentState) => ({
books: currentState.books
}))
}
});
BooksAPI.update(book, shelf)
}
render() {
return (
<div>
<Route exact path='/' render={() => (
<ListBooks
books={this.state.books}
onUpdateShelf={this.updateShelf}
/>
)} />
</div>
)
}
}
export default BooksApp
import React,{Component}来自“React”
从“./ListBooks”导入ListBooks
从“/utils/BooksAPI”导入*作为BooksAPI
从“react router dom”导入{Route}
类BooksApp扩展组件{
状态={
书籍:[]
}
componentDidMount(){
BooksAPI.getAll()
.然后((书)=>{
此.setState(()=>({
书
}))
})
}
UpdateSelf=(书籍、书架)=>{
console.log('Test');
this.state.books.forEach(b=>{
if(b.id==book.id&&b.shelf!==book.shelf){
b、 架子
this.setState((当前状态)=>({
图书:currentState.books
}))
}
});
BooksAPI.update(书籍、书架)
}
render(){
返回(
(
)} />
)
}
}
导出默认BookApp
ListBooks.js
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './App.css'
const shelves = [
{
key: 'currentlyReading',
name: 'Currently Reading'
},
{
key: 'wantToRead',
name: 'Want To Read'
},
{
key: 'read',
name: 'Read'
},
{
key: 'none',
name: 'None'
}
];
class ListBooks extends Component {
static propTypes = {
books: PropTypes.array.isRequired
}
state = {
showSearchPage: false,
query: ''
}
render() {
const { books, onUpdateShelf } = this.props
function getBooksForShelf(shelfKey) {
return books.filter(book => book.shelf === shelfKey);
}
console.log(books);
return(
<div className="app">
{this.state.showSearchPage ? (
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
<div className="search-books-input-wrapper">
{/*
NOTES: The search from BooksAPI is limited to a particular set of search terms.
You can find these search terms here:
https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
you don't find a specific author or title. Every search is limited by search terms.
*/}
<input type="text" placeholder="Search by title or author"/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid"></ol>
</div>
</div>
) : (
<div className="list-books">
<div className="list-books-title">
<h1>My Reads</h1>
</div>
<div className="list-books-content">
<div>
{ shelves.map((shelf) => (
<div key={shelf.key} className="bookshelf">
<h2 className="bookshelf-title">{shelf.name}</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<li>
{ getBooksForShelf(shelf.key).map((book) => (
<div key={book.id} className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
<div className="book-shelf-changer">
<select>
<option value="none" defaultValue="Read" disabled >Move to...</option>
{shelves.map((shelf) => (
<option
key={shelf.key} value={shelf.name} onClick={() => onUpdateShelf(book, shelf.key)} >{shelf.name}
</option>
))}
</select>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.author}</div>
</div>
))}
</li>
</ol>
</div>
</div>
)) }
</div>
</div>
<div className="open-search">
<a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
</div>
</div>
)}
</div>
)
}
}
export default ListBooks
import React,{Component}来自'React';
从“道具类型”导入道具类型
导入“./App.css”
常数托架=[
{
键:“currentlyReading”,
名称:“当前正在阅读”
},
{
键:“wantToRead”,
姓名:'想要阅读'
},
{
键:“读取”,
名称:“读取”
},
{
关键字:“无”,
姓名:“无”
}
];
类ListBooks扩展组件{
静态类型={
书籍:需要PropTypes.array.isRequired
}
状态={
showSearchPage:false,
查询:“”
}
render(){
const{books,onUpdateShelf}=this.props
函数getBooksForShelf(shelfKey){
返回books.filter(book=>book.shelf===shelfKey);
}
控制台。日志(书籍);
返回(
{this.state.showSearchPage(
this.setState({showSearchPage:false}}>Close
{/*
注意:BooksAPI中的搜索仅限于一组特定的搜索词。
您可以在此处找到这些搜索词:
https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
但是,请记住BooksAPI.search方法是按标题或作者进行搜索的
您找不到特定的作者或标题。每次搜索都受到搜索词的限制。
*/}
) : (
我的书
{shelfs.map((shelf)=>(
{shelf.name}
{getBooksForShelf(shelf.key).map((book)=>(
搬到。。。
{shelfs.map((shelf)=>(
onUpdateShelf(book,shelf.key)}>{shelf.name}
))}
{书名}
{book.author}
))}
)) }
this.setState({showSearchPage:true}}>添加一本书
)}
)
}
}
导出默认列表簿
您的问题是在选项上单击onClick
标记,尝试在选择标记上单击onChange
。这是因为option
元素不会在所有浏览器中触发click事件
这是一个基于代码的函数,您可以看到函数updateself
正在被调用