如何将按钮添加到无状态组件中？

Question

好的，

这个很简单，但我在这里花了几个小时试图弄清楚如何解决这个问题。

首先，我正在学习 React 课程，并且我第二次提交了该项目以供审阅者评估。当然不是同一个审稿人，他/她要求我进行与上一个不同的其他修改。

事实是，组件工作正常，但审阅者建议我将组件从类组件转换为函数组件，这就是我的问题开始的地方。

请原谅，但我必须把整个无状态组件代码（我认为这有点大），来解释接下来会发生什么：

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 有什么可做的，我真的不知道。

提前致谢。

Answer 1

如果要使用 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;

Answer 2

为了从功能组件中获得与类组件相同的效果，您需要使用状态挂钩：https://reactjs.org/docs/hooks-overview.html#state-hook

尝试阅读文档并不难，它会帮助你变得更好！

在你的例子中使用这个：

const [showSearchPage, setShowSearchPage] = useState(false);

当你点击按钮时使用

<button onClick={() => setShowSearchPage(true)}>

"setShowSearchPage(true)" 会产生和 setState 一样的效果 this.setState({ showSearchPage: true })}

希望对您有所帮助！请再次阅读文档以更好地掌握功能组件中的状态挂钩