Javascript React Native for Web:更新状态时，我的组件不会重新呈现

我对React还不熟悉，过去两天我一直在做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

从'react native'导入{视图、平面列表、文本、TouchableOpacity}
类产品扩展组件{
建造师（道具）{
超级（道具）；
这个州={
数据源：[]
}
}
componentDidMount（）{
取回（“http://localhost:8000/index.php")
.then（response=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
数据来源：responseJson
})
})
.catch（错误=>console.log（错误））
}
renderItem=（数据）=>
{data.item.product_name}
{data.item.product_description}
{data.item.product_model}
返回(
this.renderItem（项目）}
keyExtractor={item=>item.id}
/>
)
}
导出默认产品

当您使用类组件创建渲染方法时，返回仅在函数组件中有效，请尝试

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

从'react native'导入{视图、平面列表、文本、TouchableOpacity}
类产品扩展组件{
建造师（道具）{
超级（道具）；
这个州={
数据源：[]
}
}
componentDidMount（）{
取回（“http://localhost:8000/index.php")
.then（response=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
数据来源：responseJson
})
})
.catch（错误=>console.log（错误））
}
renderItem=（数据）=>
{data.item.product_name}
{data.item.product_description}
{data.item.product_model}
render（）{
返回(
this.renderItem（项目）}
keyExtractor={item=>item.id}
/>
);
}
}
导出默认产品

尝试将extraData属性添加到平面列表

extraData={this.state.dataSource}

每当extraData中指定的数据发生更改时，它所做的就是重新呈现平面列表。

使用基于类的组件时，必须使用

render（）

函数包装

返回（…）

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

render（）{
返回(
this.renderItem（项目）}
keyExtractor={item=>item.id}
/>
);
}

Hi@Srath，你能把你的一些回复发出去吗？