如何在不同的ReactJS組件實例中擁有不同的數據？

Question

假設我有2個<Logs/>組件。 僅在單擊其父<Block/>時顯示它們。 每個<Block/>只有一個<Logs/>但是頁面上會有很多<Blocks/> 。

class Block extends React.Component {

    toggleExpanded() {

        this.setState({
            isExpanded: !this.state.isExpanded
        });

    }

    render() {

        let blockId = // ...

        return (
            <div>
                <button type="button" onClick={() => this.toggleExpanded()}>Toggle</button>
                {this.state.isExpanded && <Logs blockId={blockId} />}
            </div>
        );

    }

}

export default Block;

創建<Logs/> ，我想使用Redux從服務器獲取數據。 某天可能會有很多<Logs/>所以我不想一開始就加載所有數據，只加載所需的數據。

class Logs extends React.Component {

    componentDidMount() {

        if (!this.props.logs) {
            this.props.fetchBlockLogs(this.props.blockId);
        }

    }

    render() {

        return (this.props.logs && this.props.logs.length)
            ? (
                <ul>
                    {this.props.logs.map((log, i) => <li key={i}>{log}</li>)}
                </ul>
            )
            : (
                <p>Loading ...</p>
            );

    }

}

SupportLogs.defaultProps = {
    logs: null
}

const mapStateToProps = (state) => ({
    logs: state.support.logs
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    fetchBlockLogs: (blockId) => {
        dispatch(ActionTypes.fetchBlockLogs(blockId));
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(SupportLogs);

當前，當我切換一個父<Block/>關閉並重新打開時，數據會被記住。 這是一個不錯的功能-數據不會經常更改，本地緩存是加快頁面速度的不錯方法。 我的問題是，當我打開第二個<Block/> ，顯示了第一個<Logs/>的數據。

我的問題是： 如何為<Logs/>的新實例加載新數據？

我是否必須每次都重新加載數據，如果可以，是否可以清除logs屬性以便重新獲得加載動畫？

Answer 1

也許考慮將您商店中的日志更改為一個對象，並加載其中的日志，並以塊ID為鍵：

logs: {
 'someBlockId': [
   'some logline', 
   'some other logline'
 ]
]

讓減速器通過塊ID將任何請求的日志添加到此對象，以便在您請求它們時將它們緩存在商店中（順便說一句，我真的很喜歡您的組件調度一個操作來觸發其他地方獲取數據的行為，而不是副作用）在組件內部執行獲取數據:)）。

該化簡器假設在一個動作中調度了所獲取的數據，以說它已接收到特定塊的日志， {type: 'UPDATE_LOGS', blockId: 'nic cage', receivedLogsForBlock: ['oscar', 'winning', 'actor']}

logsReducer: (prevState, action) => {
  switch(action.type)
    case 'UPDATE_LOGS':
      return Object.assign({}, prevState, {
        [actions.blockId]: action.receivedLogsForBlock
      })
    default: return prevState
  }
}

現在，您可以在組件中按ID查找它們。 如果未在logs對象中定義所需的塊，則您知道需要發送要進行加載的操作，並且還可以同時顯示loader

class Logs extends React.Component {

  componentDidMount() {
    const {logs, blockId} = this.props
    if (!logs[blockId]) {
      this.props.fetchBlockLogs(blockId);
    }
  }

  render() {
    const {logs, blockId} = this.props
    return (logs && logs[blockId]) ? (
        <ul>
          {logs[blockId].map((log, i) => <li key={i}>{log}</li>)}
        </ul>
      ) : (
        <p>Loading ...</p>
      )
  }

}

這增加了undefined的logs[blockId]含義，即not loaded ，因此可以區分需要加載的內容和已加載但有空日志的內容，您的原始日志會誤認為需要加載