javascript - 子 setState 导致父/整个应用程序在 React 中刷新

Question

我有 a button、 afunction和 a stateall within Dashboard.js，显示在下面。

//Dashboard.js

<button type="button" onClick={() => this.handleOpenModal(snippet)}>EDIT</button>

调用这个函数

//Dashboard.js

  handleOpenModal = snippet => {
    this.setState(
      {
        sid: snippet._id,
        name: snippet.name,
        details: snippet.details,
        content: snippet.content,
      },
      () => this.showModal.current.showModal()
    )
  }

它设置状态，并创建一个ref.

//Dashboard.js

  constructor(props) {
    super(props)
    this.showModal = React.createRef()
    this.state = {
      snippets: [],
      sid: '',
      name: '',
      details: '',
      content: '',
    }
  }

ref传递给Modal.js组件

//Dashboard.js

        <Modal
          ref={this.showModal}
          sid={this.state.sid}
          name={this.state.name}
          details={this.state.details}
          content={this.state.content}
          handleInputChange={this.handleInputChange}
          handleContentChange={this.handleContentChange}
          handleUpdateDashboard={this.handleUpdateDashboard}
        />

---

Modal 的状态包含一个布尔值、两个函数和一个三元运算符。

showModal当您单击按钮时，由ref从父级内部传递的内容触发。Dashboard.js设置isVisible为真。这无缝地工作。模态立即打开，无需任何刷新/重新加载。按预期工作。 但是，由组件

hideModal底部的按钮触发。Modal.js它设置isVisible为假。这会关闭模式，但随后会快速闪现似乎是整个 App 刷新的内容。而且我无法弄清楚为什么/如何发生这种情况。它使体验感觉笨拙。

//Modal.js

export default class Modal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isVisible: false,
    }
  }

  showModal = () => {
    this.setState({ isVisible: true })
  }
  hideModal = () => {
    this.setState({ isVisible: false })
  }
  render() {
    const handleUpdateDashboard = this.props.handleUpdateDashboard
    return (
      <div
        id="Modal"
        style={{ display: this.state.isVisible === true ? 'flex' : 'none' }}
      >
        //
        //Modal content
        //
        <button onClick={() => this.hideModal()}>CLOSE</button>
      </div>
    )
  }
}

标签： javascriptreactjs