在条件渲染中组合的React组件

Question

I have two React components of the same class, which has it's own state storing data. I am conditionally-rendering the components based on a prop of the parent (region) that is propagated by a dropdown change. On the first dropdown change, the component is rendered with the title prop of the second component, but the data of the first component. On the second dropdown change it works as intended.

I have tried testing the components individually and they work fine with the region prop change. I also added a prop to one of the components and a conditional to prevent re-rendering on receiving props, but I got the same result. I could just hide one of the components depending on the region prop, but I would like to do this via conditional rendering.

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}
);

EDIT with more details:

The component has a fetch call to the back end on both componentDidMount() and componentWillReceiveProps() that updates the component's state. Each instance of the component (title={'A'} and title={'B'}) works properly when rendered non-conditionally. Is it possible that the component that is initially rendered is trying to update its state at the same time that the new component is being rendered in its place?

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

If you're using shouldComponentUpdate or PureComponent this may be causing your issue. It is hard to diagnose the problem without seeing more of the code.

It seems to me that the title prop in component is not getting updated on the first change because componentWillReceiveProps isn't getting triggered.

Answer 2

I'd put this in a comment if there was room since it isn't an answer.

You're unnecessarily mounting/unmounting components which is adding complexity with regard to the lifecycle methods. I'd always return a single component and just change the props. Continue to fetch in componentDidMount and componentWillReceiveProps but consider caching responses as well.

So maybe something like;

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} />