在 componentDidMount 之后反应不渲染组件答案

【问题标题】：React not rendering component after componentDidMount在 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 会重新渲染所有内容，所以这应该可以工作，但它有一些警告。

标签： reactjs react-native react-native-android

【解决方案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) => (

正在工作。

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

【讨论】：