反應錯誤無效掛鈎 & state 未定義

Question

我在嘗試制作模態時出錯。 我試圖制作一個在單擊按鈕時出現的模式。 這是一個以模態彈出的表單，提交后模態關閉。 在我更改流程之前，表單是一個常規組件，因此我更改了組件以使其成為模式。 這樣做之后，我收到了這個錯誤。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 

還有我的 state 不再 function

 Line 7:4:  'state' is not defined  no-undef

值得一提的是，我對 React 還是很陌生。

這是我制作成模態的形式：

import React from 'react'
import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import { Modal } from 'react-bootstrap'

const CreateService = () => {
   state = {
    name: '',
    cost: '',
  }

  const { name, cost } = this.state
  const POST_MUTATION = gql`
 mutation PostMutation($cost: String!, $name: String!) {
  postService(cost: $cost, name: $name) {
    id
    cost
    name
  }
}
    `

  return (
    <Modal
      size="lg"
      aria-labelledby="contained-modal-create-service"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">Create service</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="flex flex-column mt3">
          <input
            className="mb2"
            value={name}
            onChange={e => this.setState({ name: e.target.value })}
            type="text"
            placeholder="A name for the service"
          />
          <input
            className="mb2"
            value={cost}
            onChange={e => this.setState({ cost: e.target.value })}
            type="text"
            placeholder="The service cost"
          />
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Mutation mutation={POST_MUTATION}
          variables={{ cost, name }}
          onCompleted={() => this.props.history.push('/')}>

          {postMutation =>
            <button onClick={postMutation}>Submit</button>
          }
        </Mutation>
      </Modal.Footer>
    </Modal>
  )

}

export default CreateService

這也是按鈕應該激活模式的地方

class Sidenav extends Component {
render() {
    const authToken = localStorage.getItem(AUTH_TOKEN)
    const [modalShow, setModalShow ]= React.useState(false)
    return (
      <React.Fragment>
        {authToken && (
          <div id="nav-container">
            <div id="nav-buttons">
              <button>Add new client</button>
              <button onClick={()=> setModalShow(true)}>Create new service</button>
              <CreateService show={modalShow} onHide={() => setModalShow(false) }/>
            </div>
            <div id="nav-logout">
              <div id="svg">
                <svg className="bi bi-box-arrow-in-right" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z" clip-rule="evenodd" />
                  <path fill-rule="evenodd" d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z" clip-rule="evenodd" />
                  <path fill-rule="evenodd" d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z" clip-rule="evenodd" />
                </svg>
              </div>
              <div
                id="logout"
                onClick={() => {
                  localStorage.removeItem(AUTH_TOKEN)
                  this.props.history.push(`/Login`)
                }}
              >
                logout
          </div>
            </div>
          </div>
        )}
      </React.Fragment>
    )
  }
}
export default withRouter(Sidenav)

任何人都可以幫助我了解發生了什么問題，或者分享可以解決問題的過去經驗嗎？

Answer 1

您的問題是您在 class 組件中使用掛鈎：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Hooks 只能與 Function 組件一起使用，例如const MyComponent = () => {}

在 class 組件中，您必須使用this.state和this.setState作為更新程序