反应错误无效钩子和状态未定义

Question

我在尝试制作模式时出错。我试图制作一个在单击按钮时出现的模式。这是一个以模态弹出的表单，提交后模态关闭。 在我更改流程之前，表单是一个常规组件，因此我更改了组件以使其成为模态。 这样做之后，我收到了这个错误。

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

而且我的状态也不再起作用了

 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

您的问题是您在类组件中使用了钩子：

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

Hooks 只能与 const MyComponent = () => {} 等函数组件一起使用

在类组件中，您必须使用 this.state 和 this.setState 作为更新程序