好的，
这个问题很简单，但我在这里花了几个小时试图弄清楚如何解决这个问题。
首先，我正在做React类(class)，并且我已经第二次提交了该项目以供审稿人审核。当然不是同一个审稿人，他/她要求我进行与之前不同的其他修改。
事实是，该组件工作正常，但审阅者建议我将类组件转换为函数组件，这就是我的问题开始的地方。
请，我道歉，但我必须放置整个无状态组件代码(我认为有点大)，来解释接下来发生的事情:
import React from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
function Home (props) {
return (
<div className='list-books'>
<div className='list-books-title'>
<h1>MyReads</h1>
</div>
<div className='list-books-content'>
<div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Currently Reading</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'currentlyReading')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='currentlyReading'
/>
</li>
))
}
</ol>
</div>
</div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Want to Read</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'wantToRead')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='wantToRead'
/>
</li>
))
}
</ol>
</div>
</div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Read</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'read')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='read'
/>
</li>
))
}
</ol>
</div>
</div>
</div>
</div>
<div className='open-search'>
<Link to='/search'>
<button onClick={() => this.setState({ showSearchPage: true })}>
Add a book
</button>
</Link>
</div>
</div>
);
}
export default Home;
正如我所说，当组件是类组件时，一切正常，但是当我将其转换为函数组件时，按钮渲染时出现错误(第 78 行，最后一行之一) ，在我看来，错误如下:
任何人都可以帮助我弄清楚如何将按钮添加到无状态组件中？
我想 setState 可能需要做一些事情，我真的不知道。
提前致谢。
最佳答案
如果你想使用showSeachPage的值，直接使用变量“showSearchPage”而不是state.showSearchPage。这里这个变量的默认值为 false。如果您想查看文档 https://reactjs.org/docs/hooks-intro.html
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
function Home (props) {
const [showSearchPage, setShowSearchPage] = useState(false);
return (
<div className='list-books'>
<div className='list-books-title'>
<h1>MyReads</h1>
</div>
<div className='list-books-content'>
<div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Currently Reading</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'currentlyReading')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='currentlyReading'
/>
</li>
))
}
</ol>
</div>
</div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Want to Read</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'wantToRead')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='wantToRead'
/>
</li>
))
}
</ol>
</div>
</div>
<div className='bookshelf'>
<h2 className='bookshelf-title'>Read</h2>
<div className='bookshelf-books'>
<ol className='books-grid'>
{
props.books
.filter(book => book.shelf === 'read')
.map(book => (
<li key={book.id} >
<Book
book={book}
changeShelf={props.changeShelf}
actualShelf='read'
/>
</li>
))
}
</ol>
</div>
</div>
</div>
</div>
<div className='open-search'>
<Link to='/search'>
<button onClick={() => setShowSearchPage(true)}>
Add a book
</button>
</Link>
</div>
</div>
);
}
export default Home;
关于javascript - 如何将按钮添加到无状态组件中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58885321/