React Native for Web: мой компонент не выполняет повторную визуализацию при обновлении состояния

Question

Я новичок в React и работаю над React только последние 2 дня. Я пытаюсь получить данные из 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

Попробуйте добавить в FlatList реквизит extraData extraData={this.state.dataSource}. Рендеринг FlatList происходит каждый раз, когда указанные данные в extraData изменяются.

Answer 2

Вы должны обернуть return(...) функцией render() при использовании компонента на основе классов.

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={item => this.renderItem(item)}
                    keyExtractor={item => item.id}
                />
            </View>
        );
    }

Answer 3

Поскольку вы используете компонент класса, вам нужно создать метод рендеринга, возврат работает только в компонентах функций, попробуйте его

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