Question

我有一个简单的React组件，它带有一个道具，如果该道具为0，则显示一个组件，否则显示另一个组件。在页面加载时，它等于0，所以第一个组件加载，一旦从本地存储更新了Redux存储，父组件中的该值将更新其本地状态，将新的prop传递到我的组件。发生的事情不是切换到渲染其他组件，而是将第二个组件放到第一个组件中……我以前从未见过这种行为，而且我一生也无法弄清楚为什么。

我尝试了各种方式，在无状态组件和功能组件之间进行切换，我尝试使用componentWillReceiveProps来基于此接收更新的prop和setState，并使我的条件逻辑基于状态。所有结果都相同。

const ComponentThatGetsUpdated = (props) => (
    props.PropThatGetsUpdated === 0 ? <ComponentOne /> : <ComponentTwo />
);

我希望在页面加载时输出的内容是

<div>contents of component one</div>

然后，当我的redux商店更新了新道具后，输出现在应该是第二部分的内容

<div>contents of component two</div>

道具更新后的实际输出是

<ComponentOne />
    <ComponentTwo></ComponentTwo>
<ComponentOne />

仅供参考，ComponentThatGetsUpdated的父组件如下所示：

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {PropToPassDown: 0}
        this.sub = this.sub.bind(this);
        const sub = store.subscribe(this.sub);
    }
    sub() {
        //when my redux store is updated this function runs and sets PropToPassDown to the new value, for this example it sets PropToPassDown in local state to 1
    }
    render() {
        return (
            <ComponentThatGetsUpdated PropToPassDown={this.state.PropToPassDown} />
        )
    }
}

使用组件的条件渲染的奇怪问题

0 个答案: