在条件渲染上结合 React 组件

Question

我有两个同一个类的 React 组件，它们有自己的状态存储数据。我基于通过下拉更改传播的父（区域）的道具有条件地渲染组件。在第一次下拉更改时，组件使用第二个组件的 title 属性呈现，但使用第一个组件的数据。在第二个下拉更改中，它按预期工作。

我已经尝试单独测试这些组件，并且它们可以很好地适应区域属性的变化。我还向其中一个组件添加了一个道具和一个条件，以防止在接收道具时重新渲染，但我得到了相同的结果。我可以根据 region 属性隐藏其中一个组件，但我想通过条件渲染来做到这一点。

var content = null;
if(this.props.region === 'WEST'){
    content = (<Component title={'A'} region={this.props.region} dataSource={'someURL'} />);
}else{
    content = (<Component title={'B'} region={this.props.region} dataSource={'someOTHERURL'} />);
}

return (
    {content}
);

编辑更多细节：

组件在 componentDidMount() 和 componentWillReceiveProps() 上都有对后端的 fetch 调用，用于更新组件的状态。组件的每个实例（title={'A'} 和 title={'B'}）在无条件渲染时都能正常工作。最初渲染的组件是否有可能在新组件在其位置渲染的同时尝试更新其状态？

fetch('/table?tablename=' + this.props.tableName + '&region=' + 
    nextProps.region + '&chartName=' + this.props.chartName, {
        method: "GET",
        headers: { "Accept": "application/json", "Content-Type": "application/json" }
        }).then(res => res.json())
        .then(data => this.setState({data: data}));
    }

Answer 1

如果有空间，我会将其放在评论中，因为它不是答案。

您不必要地安装/卸载组件，这增加了生命周期方法的复杂性。我总是返回一个组件，只更改道具。继续获取componentDidMount 和componentWillReceiveProps，但也要考虑缓存响应。

所以可能是这样的；

const data = {
  WEST: {
    title: 'A',
    url: 'someurl'
  },
  EAST: {
    title: 'B',
    url: 'anotherurl'
  },
}
const dataSource = data[this.props.region];

return <Component title={dataSource.title} region={this.props.region} url={dataSource.url} />

Answer 2

如果您使用的是 shouldComponentUpdate 或 PureComponent，这可能会导致您的问题。如果不查看更多代码，很难诊断问题。

在我看来，组件中的 title 属性在第一次更改时没有得到更新，因为 componentWillReceiveProps 没有被触发。