Question

我确定我在这里做傻事。我正在尝试编写一个组件，该组件根据数据的获取状态呈现三样东西之一。

1）如果提取错误，则会显示一条错误消息。 2）加载消息（如果正在获取数据）。 3）如果已获取数据，则为完整的子组件。

现在发生的事情是获取成功，但是“加载”消息不会消失。在下面的代码示例中，您可以看到我添加了console.log来确定是否应该进行完整渲染。让我感到困惑的是，这个将最终记录为true，但“ Loading”消息仍然显示。

这个确切的模式似乎适用于该应用程序中的同级组件，因此我对这里缺少的内容感到困惑...这是整个组件，它已经被匿名化并去除了样式，但是结构在其他方面是相同的。

function mapStateToProps(state) {
    return {
        Data: state.NewDataReducer,
    };
}

const mapDispatchToProps = {
    fetchNewData: ActionCreators.fetchNewData,
};

const DataError = () => (
    <div>
        Error fetching new data!
    </div>
);

const DataLoading = () => (
    <div>
        Loading..
    </div>
);

class MainContainer extends PureComponent {
    static propTypes = {
        choice: PropTypes.string,
        fetchNewData: PropTypes.func,
        Data: ImmutablePropTypes.map.isRequired,
    }

    state = {
        choice: null,
    }

    componentDidUpdate(nextProps) {
        const { choice, fetchNewData, Data } = this.props;

        if(!choice) {
            return;
        }

        if(isFetching(Data)) {
            return;
        }

        const newChoiceSelected = choice !== nextProps.choice;
        if(newChoiceSelected) {
            fetchNewData({choice});
        }
    }

    handleChangeChoice = (choice) => {
        this.setState({
            choice: { choice }
        });
    }

    render() {
        const { choice, Data } = this.props;

        const error = hasFetchError(Data);
        const loading = !error && !isFetched(Data);
        const renderFull = !loading && !error;

        console.log(renderFull);

        if(!renderFull) {
            return (
                <div>
                    Please wait.
                </div>
            );
        }

        const { dataBreakdown } = Data.get("dataKey").toJS();

        return (
            <div>
                <ChildComponent
                  choice={choice}
                  dataBreakdown={dataBreakdown}
                  onSetDrillDown={this.handleChangeChoice}
                />
            </div>
        );
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(MainContainer);

Answer 1

您需要将不可变数据类型所要映射的参数传递给map函数。 Map会创建一个新的数组，并对该数组中迭代通过的项进行回调。这只是一个例子

Data: ImmutabaleProptypes.map((ing, index)=>( <li key={index}>{Data}</li> // you can write jsx in here. ));

即使调用render函数中的console.log，组件也不会在状态改变时重新渲染

1 个答案: