Question

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

render方法看起来像这样：

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中设置数据时，它不起作用！我真的不知道在这里什么是本机的。

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

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

似乎this.state.data始终为空。

也许有人可以帮助我吗？

非常感谢

Answer 1

ComponentDidMount()在render()函数之后执行，因此最好在呈现之前并在ComponentDidMount()之外执行此操作：

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

因此，起初，在render()之前，您必须设置一些数据值。

尝试三个可能的答案：

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

Answer 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文档！正在抓取中！我在这里所做的是将状态设置为演示数据，只是为了查看生命周期是否在等待构造函数，似乎没有。似乎渲染是在构造函数完成初始化之前触发的（..我无法想象，那真的很糟糕），但是我在列表中得到了一个null异常！

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

绝对奇怪。因此，如果您在我的日志中查看生命周期的处理方式：

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) => (

正在工作。

我真的不知道这是怎么回事？

在componentDidMount之后反应不渲染组件

2 个答案: