在 componentDidMount 之后反应不渲染组件

Posted 2023-03-12

【中文标题】在 componentDidMount 之后反应不渲染组件

【英文标题】：React not rendering component after componentDidMount

【发布时间】：2020-10-27 19:21:43

【问题描述】：

我有一个组件，它在 componentDidMount 之后没有重新渲染。

渲染方法是这样的：

render() 
            
                console.log("----------RENDERING-----------------------------")
            
            return (
            <ImageBackground
                source=require('../assets/images/bg.png')
                style=styles.bg
            >
                <View style=styles.containerHome>
                    <View style=styles.top>
                        <City/>
                        <Text>myapp</Text>
                        /*<Filters />*/
                    </View>

                    <CardStack
                        loop=true
                        verticalSwipe=false
                        renderNoMoreCards=() => null
                        ref=swiper => (this.swiper = swiper)
                    >
                        this.state.data.map((item, index) => (
                            <Card key=index>
                                <CardItem
                                    text=item.name
                                    detail=item.detail
                                    imageurl=item.imageurl
                                    matches="0"
                                    actions
                                    onPressLeft=() => this.swiper.swipeLeft()
                                    onPressRight=() => this.swiper.swipeRight()
                                />
                            </Card>
                        ))
                    </CardStack>
                </View>
            </ImageBackground>
        );
    

...只是渲染一个卡片组。

相关的是这一行：

this.state.data.map((item, index) => (

如果我从文件（演示）中设置数据静态，它可以工作！

表示线条是否像这样

Demo.map((item, index) => (

一切都好！

但是当我在 componentDidMount 中设置数据时，它不起作用！ 我真的不知道 react-native 在这里做什么：

componentDidMount() 
        this.setState(
            isLoaded: true,
            data: Demo
        );

我将 state.data 设置为完全相同的演示值，但 react 没有重新渲染。

好像this.state.data一直是空的。

也许有人可以帮助我？

非常感谢

【问题讨论】：

Demo什么时候完成，总是静态导入吗？您是否实施了任何shouldComponentUpdate？通常在状态更改时，react 会重新渲染所有内容，所以这应该可以工作，但它有一些警告。

【参考方案1】：

ComponentDidMount() 在render() 函数之后执行，因此您最好在渲染之前和ComponentDidMount() 之外执行此操作：

this.setState(
    isLoaded: true,
    data: Demo
);

所以最初，在render() 之前，您必须设置一些数据值。

尝试三个可能的答案：

默认值data:Demo，或者 在可以在render()之前执行的函数中实现this.state，或者 将其放在render() 函数中return 语句之前。

【参考方案2】：

非常感谢您的提示。

但是我已经有问题了。似乎我没有得到生命周期，即使我现在正在编程时也反应了一点点。

您的提示非常好，当我在构造函数中执行此操作时，它正在工作。 但最后，我想在那里获取数据，如果我这样做，它似乎在构造函数中不起作用。

fetch('http://hostname/api/v1/xxxx', 
            method: 'get',
            headers: new Headers(
                    'Authorization': 'Bearer pumuckl',
                    'Content-Type': 'application/json'
                
            )
        ).then(res => res.json())
            .then(
                (result) => 
                    this.state = 
                        data: Demo,
                    
                ,
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => 
                    this.setState(
                        isLoaded: true,
                        error
                    );
                
            )

代码来自 facebook 文档！获取工作！ 我在这里所做的是将状态设置为演示数据，只是为了查看生命周期是否正在等待构造函数，而它似乎没有。 似乎在构造函数完成初始化之前触发了渲染（..我无法想象，那会很糟糕），但我在列表中得到了一个空异常！

我必须使用异步等待吗？我不这么认为。 只是想在从 fetch 渲染之前初始化我的 List。

太奇怪了。 因此，如果您查看我的日志，生命周期是如何处理的：

10-28 17:44:06.847  4796  5362 I ReactNativeJS: *************************** Constructor *****************************************************
10-28 17:44:06.851  4796  5362 I ReactNativeJS: ----------RENDERING-----------------------------
10-28 17:44:06.918  4796  5362 I ReactNativeJS: *************************** component Did Mount *****************************************************
10-28 17:44:06.927  4796  5362 I ReactNativeJS: ----------RENDERING-----------------------------
10-28 17:44:06.935  4796  5362 I ReactNativeJS: *************************** component Did Update *****************************************************

我现在真的有点绝望....

当我在渲染方法中记录我的数据时：

 render() 
            const data = this.state.data
            
                console.log("----------RENDERING-----------------------------")
                console.log("----------DATA IN RENDERING-----------------------------")
                console.log(data)
            
            return ( ... 

实际上，数据似乎在那里。但是使用

 data.map((item, index) => (

不工作，而

 Demo.map((item, index) => (

正在工作。

我真的不知道这里发生了什么？