如何在不同的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 ，因此可以区分需要加载的内容和已加载但有空日志的内容，您的原始日志会误认为需要加载