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

Question

好的，

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

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

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

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

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;

正如我所说，当组件是 Class 组件时，一切正常，但是当我将其转换为 Function 组件时，它在按钮渲染中发生错误（第 78 行，最后一个），错误在我看来是以下一个：

任何人都可以帮助我弄清楚如何将按钮添加到无状态组件中？

我想可能有一些关于 setState 的事情要做，我真的不知道。

提前致谢。

Answer 1

如果要使用 showSeachPage 的值，请直接使用变量“showSearchPage”而不是 state.showSearchPage。 这里该变量的默认值为 false。 如果您想通过文档https://reactjs.org/docs/hooks-intro.html 来 go

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

为了从功能组件中获得与 class 组件相同的效果，您需要使用 state 挂钩： https://reactjs.org/docs/hooks-view

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

在你的例子中使用这个：

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

当你点击按钮使用

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

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

希望有帮助！ 请再次阅读文档以很好地掌握功能组件中的 state 挂钩