0

我是 React 的新手，我正面临与状态更新相关的问题。

我有一个父组件。在父组件构造函数中，我创建了子组件的多个实例。

使用父组件的状态，我显示一个子组件实例。

子组件的实例具有一些作为道具传递的父组件状态值。

父组件状态如下所示（我已简化代码，以便更清晰）

displayedContainer: {...} // An Instance of Child Component
isLoading: false

父组件构造函数如下所示

constructor(props) {
    super(props);
    // Create state
    this.state = {
        isLoading: false,
        displayedContainer: null
    };
    // Create all Child Component (Container)
    this.defaultComponent = <Container 
        isLoading={this.state.isLoading}
    ></Container>
    // Others Child Component are created the same way as above.
    // To clearify the code i have removed them.
}

这是渲染方法

render() { 
    return (
        <div>
            {this.state.displayedContainer}
            <div className="container-left-bar"></div>
        </div>
    )
}

从那里，我可以从一个子组件显示切换到另一个，这样它就state.displayedContainer可以工作了。但是当state.isLoading更新时，子组件不会检测到它。我认为这是因为我在构造函数中创建了子组件。

如果我想在渲染之前保留创建子组件的逻辑但修复未检测到状态更新的问题，我该怎么办？

谢谢您的帮助 ！

4

1 回答 1

0

问题是您<Container />在构造函数中只渲染一次。呈现的实例在内存中 ( this.defaultComponent)，因此当您调用this.setState子时，它永远不会更新 - 不会通知任何道具的更改。此代码应该转到render()方法。

可以这样想：当 React 确定时this.setState（例如，您想显示其他容器而不是当前容器），React 调用方法，并且应该使用更新的道具重新render()渲染。<Container .../>但是由于渲染组件的代码不在render()方法中 - 告诉<Container .../>使用来自状态的最新isLoading道具的代码，永远不会真正使用道具（或任何其他道具）<Container />的新值进行更新。isLoading

你应该实现这样的目标：

    render() {
        ...
        let renderCurrentContainer = null
        if (...) {
            renderCurrentContainer = <Container isLoading={this.state.isLoading} ...otherPropsHere... />
        }
        else if (...) {
            renderCurrentContainer = ...
        }
        else if (...) {
            renderCurrentContainer = ...
        }
        return <...>
            {renderCurrentContainer}
        </...>
    }

如果您要问在 if 条件中添加什么，您需要以某种方式标记当前要渲染的组件，我将把它留给您的创造力，但是您可以使用类似currentRenderedContainerIndexwhich can have values{0, 1, 2}或currentRenderedContainer来自枚举的字符串，例如{'FIRST_COMPONENT', 'SECOND_COMPONENT', 'THIRD_COMPONENT'}

然后你会用这样的东西：

if (currentRenderedContainer === 'FIRST_COMPONENT') {
    renderCurrentContainer = <Container isLoading= {this.state.isLoading} ...otherPropsHere... />
}
else if (currentRenderedContainer === 'SECOND_COMPONENT') {
    renderCurrentContainer = ...
}
else if (currentRenderedContainer === 'THIRD_COMPONENT') {
    renderCurrentContainer = ...
}
于 2018-07-18T13:25:12.067 回答