狀態改變時不會重新渲染

Question

我有以下組件......

class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        register: false
    }

  }
  handleClick(event)
    {
      console.log("link was clicked");
      this.setState({register: true});

    }

    render(){


        return (

            <If condition={ this.state.register }>
                <Then><Register /></Then>
                <Else>{() => 
                    <Index event={this.handleClick} />

                }</Else>
            </If>   
        );  
    }
}

module.exports = App;

因此，只要單擊鏈接，就會調用我的函數handleClick ，這會將狀態更改為true。 但是， <IF>語句沒有注意到狀態發生了變化，因此保持不變（僅保留索引）

我想要的是只要點擊鏈接就會呈現<Register /> 。 因此，如果單擊鏈接，狀態將更改為true，然后IF語句將捕獲此更改並呈現正確的組件。

我怎樣才能做到這一點？ 如何讓IF語句注意到狀態的變化？

Answer 1

不確定<Index>是什么或者它對event做了什么。 如果它只調用作為props.event傳遞的函數，則使用錯誤的this引用調用handleClick函數，並且不為正確的組件設置狀態。

如果您使用具有階段2預設或更低的Babel，您可以使用語法來綁定this ：

class App ... {
  ...
  handleClick = (event) => { ... }
  ...
}

是的，這是一個箭頭功能定義，但直接在class 。 它將bind正確的this引用，以便它可以被傳遞，並且在調用時它將具有正確的引用。

或者，您可以在傳遞函數時直接使用bind ，如event={this.handleClick.bind(this)} 。 但要注意，這會在每次調用時創建一個新函數，因此如果經常調用它會影響性能。 建議你不要使用這種方法，airbnb的eslint配置會將此標記為錯誤。 更好的方法是在構造函數中進行一次時間綁定，如this.handleClick= this.handleClick.bind(this) 。

如果您想了解更多信息， 這個Medium帖子還有 2種方法可以綁定並解釋所有5個選項。

Answer 2

你可以通過以下代碼來做到

   return (
      { this.state.register ? <Register /> : <Index event={this.handleClick.bind(this)} /> }
    );