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.

挂钩只能与const MyComponent = () => {}之类的功能组件一起使用

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

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

1 个答案: