Question

我有两个相同类的React组件，它有自己的状态存储数据。我基于通过下拉更改传播的父（区域）的prop来有条件地渲染组件。在第一个下拉列表更改时，组件使用第二个组件的标题prop进行渲染，但是第一个组件的数据。在第二次下拉更改它按预期工作。

我已经尝试过单独测试这些组件，它们可以在区域改变时正常工作。我还为其中一个组件添加了一个prop和一个条件，以防止在接收道具时重新渲染，但我得到了相同的结果。我可以隐藏其中一个组件，具体取决于区域prop，但我想通过条件渲染来实现。

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 = {＆＃39; A＆＃39;}和title = {＆＃39; B＆＃39;}）在非条件呈现时都能正常工作。最初呈现的组件是否有可能在新组件在其位置呈现的同时尝试更新其状态？

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

如果你正在使用shouldComponentUpdate或PureComponent，这可能会导致你的问题。如果没有看到更多的代码，很难诊断出问题。

在我看来，组件中的标题道具没有在第一次更改时得到更新，因为componentWillReceiveProps没有被触发。

Answer 2

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

您不必要地安装/卸载组件，这增加了生命周期方法的复杂性。我总是返回一个组件，只是改变道具。继续提取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} />

在有条件渲染

2 个答案: