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

Posted 2023-02-22

【中文标题】即使调用了渲染函数中的 console.log，组件也不会在状态更改时重新渲染

【英文标题】：Component won't re-render on state change, even though console.log in render function is called

【发布时间】：2019-05-31 09:36:12

【问题描述】：

我确定我在这里做了一些愚蠢的事情。我正在尝试编写一个组件，该组件根据数据的获取状态呈现三件事之一。

1) 获取错误时的错误消息。 2) 如果数据正在获取，则显示加载消息。 3) 获取数据时的完整子组件。

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

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

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

【参考方案1】：

您需要向您的映射函数传递它需要从不可变数据类型映射过来的参数。 Map 创建一个新的 a 数组，并对它在该数组中迭代的项目创建一个回调函数。这只是一个例子

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

【讨论】：

感谢您的回复！你的意思是在容器的道具中，还是在子组件的道具中？ dataBreakdown 在这种情况下将是一个数组，并且子组件会对其进行迭代。但是到子组件被渲染时，我的代码是否应该确定相关数据已被获取？怎么可能不见了？可能我在这里遗漏了一些愚蠢的东西......再次感谢

它不是丢失了它，而是它在返回时没有映射。

啊 - 在这种情况下，map 是我期望从获取中返回的道具类型，而不是函数。

尝试创建一个 dataLoaded()，当获取的数据被返回时进行渲染。