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 {

    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>

    render() {

            return (<View>

                <FlatList

                    data={this.state.dataSource}

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

                    keyExtractor={item => item.id}

                />

            </View>);

    }

}

export default Products

Answer 2

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

Answer 3

当您使用基于类的组件时，您必须return(...)使用render()函数包装。

    render() {

        return (

            <View>

                <FlatList

                    data={this.state.dataSource}

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

                    keyExtractor={item => item.id}

                />

            </View>

        );

    }