React Native for Web：当状态更新时，我的组件不会重新渲染

Question

我是 React 的新手，过去 2 天我一直在研究 React。我正在尝试从 API 获取数据。但是当数据更新时，状态不会更新，组件也不会重新渲染。但是页面的刷新完成了这项工作。

这是我的组件代码：

import { View, FlatList, Text, TouchableOpacity } from 'react-native'

class Products extends Component {

    constructor(props){

        super(props);

        this.state={

            dataSource: []

        }

    }

    componentDidMount(){

        fetch("http://localhost:8000/index.php")

        .then(response => response.json())

        .then((responseJson) => {

            this.setState({

                dataSource: responseJson

            })

        })

        .catch(error => console.log(error))

    }

    renderItem = (data) =>

        <TouchableOpacity>

            <Text>{data.item.product_name}</Text>

            <Text>{data.item.product_description}</Text>

            <Text>{data.item.product_model}</Text></TouchableOpacity>

        return (

            <View>

                <FlatList

                    data={this.state.dataSource}

                    renderItem={item => this.renderItem(item)}

                    keyExtractor={item => item.id}

                />

            </View>

        )

}

export default Products

Answer 1

当您使用类组件时，您需要创建一个渲染方法，返回仅在函数组件中有效，请尝试import { View, FlatList, Text, TouchableOpacity } from 'react-native'class Products extends Component {&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataSource: []&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; fetch("http://localhost:8000/index.php")&nbsp; &nbsp; &nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; &nbsp; &nbsp; .then((responseJson) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataSource: responseJson&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(error => console.log(error))&nbsp; &nbsp; }&nbsp; &nbsp; renderItem = (data) =>&nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{data.item.product_name}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{data.item.product_description}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{data.item.product_model}</Text></TouchableOpacity>&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.dataSource}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={item => this.renderItem(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={item => item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>);&nbsp; &nbsp; }}export default Products

Answer 2

尝试将 extraData 道具添加到 FlatListextraData={this.state.dataSource}它的作用是在 extraData 中的指定数据发生更改时重新呈现 FlatList 。

Answer 3

当您使用基于类的组件时，您必须return(...)使用render()函数包装。&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.dataSource}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={item => this.renderItem(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={item => item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }