如何將按鈕添加到無狀態組件中？

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 掛鈎