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

Question

好的，

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

首先，我正在做一个React课程，我第二次提交了这个项目以供审稿人评估。当然不是同一个审稿人，he/she 要求我进行与之前不同的其他修改。

事实是，该组件工作正常，但审阅者建议我将 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;

正如我所说，当组件是 Class 组件时一切正常，但是当我将其转换为功能组件时，按钮渲染出现错误（第 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

为了从功能组件中获得与 class 组件相同的效果，您需要使用状态挂钩：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 })}

相同的效果

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

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

How do I add a button into a stateless component?

javascript

stateless

node.js

ecmascript-6

reactjs