React調用在無狀態組件的props中傳遞的調用setState的函數

Question

我正在使用React.JS制作過濾器組件。 這些過濾組件中的一些嵌入在面板（ div ）中。 面板的包裹部分如下所示：

        Initiative <a onClick={() => {this.setState({ showInitiatives: true })}} className="milestone-list-link" href="#initiative">
          {this.state.selectedInitiative}
          <InitiativeSelector
            initiatives={initiatives || {}}
            show={this.state.showInitiatives}
            selector={
              () => {
                console.log('called selector state:', this.state)
                this.setState({ showInitiatives: false })
              }
            }
          />
          <FilterIcon />
        </a>

我的<InitiativeSelector />如下所示：

const InitiativeSelector = ({initiatives, show, selector}) => {
  return (show) ? (
    <div className="list-filter">
      <div>
        <input placeholder="Search..." />
      </div>
      <ul>
        {
          Object.values(initiatives).map((initiative, i) => <li onClick={() => {selector()}} key={i}>{initiative.name}</li> )
        }  
      </ul>
    </div>
  ) : null
}

當我運行它時，我的selector會被調用。 因此，我看到狀態被打印到控制台。 但是， this.setState({ showInitiatives: false })似乎沒有任何作用。 我的模態不會隱藏，第二次（等）單擊<li> ， showInitiatives仍設置為true 。

Answer 1

這是因為單擊事件將DOM樹與setState異步特性結合在一起

首先li.onClick觸發調用setState({ showInitiatives: false})調用selector

然后a.onClick觸發調用setState({ showInitiatives: true }) 。 您可以通過添加log語句來檢查它是否正確。

現在您有2個待處理的更新

{ showInitiatives: false}
{ showInitiatives: true}

合並時是noop。

您需要通過調用e.stopPropagation()來停止li.onClick內部的事件傳播，或者重新考慮a.onClick處理程序正在做什么。