如何使我的內部回調函數響應mobx狀態更改？

Question

我已經創建瞭如下的內部回調函數。

render() { 
    const profiles = this 
     .props 
     .store 
     .profiles; 
    const renderCell = (rowIndex: number) => { 
     console.log('rendering...'); 

     return <Cell>{profiles[rowIndex].alias}</Cell>; 
    }; 
    return (
     <div className="profileList"> 
     <Table 
      allowMultipleSelection={false} 
      numRows={this.props.store.profiles.size} 
      isRowHeaderShown={false} 
      selectionModes={SelectionModes.ROWS_AND_CELLS} 
      isColumnResizable={false} 
      isRowResizable={false} 
      defaultColumnWidth={1024} 
      onSelection={(region) => this.onSelection(region)} 
     > 
      <Column name="Connection Profiles" renderCell={renderCell.bind(this)}/> 
     </Table> 
     </div> 
    ); 
    } 

從上面的代碼中，你可以看到，有是render()函數內部創建了一個renderCell功能。當我更新mbox狀態profile.alias時，此功能不會被觸發。如果我直接將profile.alias置於render()方法下，它可以正常工作。如何讓我的renderCell響應狀態更改？

Answer 1

如果Cell組件不是外在的，你可以用@observer

裝飾它如果它的外部，你可以換你的函數中的觀察者，像這樣：

const RenderCell = observer(({ rowIndex }) => { 
    console.log('rendering...'); 

    return <Cell>{profiles[rowIndex].alias}</Cell>; 
}; 

有很大的文檔約Understanding what MobX reacts to在他們的網站上，我建議閱讀它，它可以幫助你更好地理解MobX。