Javascript react native：有没有办法查看来自state的数据？

我试图查看“swiper”中来自州的所有数据，但由于某些原因，我无法查看。 我想得到一些帮助，因为我不明白那里出了什么问题。 我用map函数查看数据，但它不起作用。 目标是显示包含数据的表

导出默认类InfoTable扩展组件{
建造师（道具）{
超级（道具）；
此.state={
tableHead0:[`${this.props.headerInfo.SHORT_TEXT}（${（this.props.headerInfo.ORDERID）.replace（/^0+/，“”）}）`，
表3:[“香蕉”]，
表3：[
['APPLE'，`${this.props.headerInfo.COSTCENTER_TXT}（${（this.props.headerInfo.COSTCENTER）}）`，
['MONKEY'，`${this.props.headerInfo.LOC_WBS_ELEM_TXT}（${this.props.headerInfo.LOC_WBS_ELEM}）`，
['FRIZ'，`${this.props.headerInfo.settleOrder_TXT}（${this.props.headerInfo.settleOrder}）`，
]
}
}
组件将接收道具（下一步）{
if（nextrops.headerInfo！=null）{
this.setState（{tableHead0:[nextrops.headerInfo]}）
}
警报（JSON.stringify（nextrops））
}
render（）{
const state=this.state；
返回(
)
}
}
const styles=StyleSheet.create({
容器：{flex:1，背景色：'#fff'}，
head0:{高度：80，背景色：'#54beff'}，
头部：{高度：40，背景颜色：'#9febf5'}，
标题文本：{fontWeight:'bold'，fontSize:20}，
正文：{页边空白：10}，
});

嘿，你可以使用它，其中所有数据都将作为一个数组传递，它将显示你的所有数据，它将帮助你

 import {Flatlist} from react-native;
    export default class InfoTable extends Component {
        constructor(props) {
            super(props);
            this.state = {
                tableHead0: [`${this.props.headerInfo.SHORT_TEXT} (${(this.props.headerInfo.ORDERID).replace(/^0+/, '')})`],
                tableHead3: ['BANANA'],
                tableData3: [
                    ['APPLE', `${this.props.headerInfo.COSTCENTER_TXT} (${(this.props.headerInfo.COSTCENTER)})`],
                    ['MONKEY', `${this.props.headerInfo.LOC_WBS_ELEM_TXT} (${this.props.headerInfo.LOC_WBS_ELEM})`],
                    ['FRIZ', `${this.props.headerInfo.SETTLORDER_TXT} (${this.props.headerInfo.SETTLORDER})`],
                ]
            }
        }

        componentWillReceiveProps(nextProps) {
            if (nextProps.headerInfo != null) {
                this.setState({ tableHead0: [nextProps.headerInfo] })
            }
            alert(JSON.stringify(nextProps))
        }

        render() {
            const state = this.state;
            return (
             <View style={styles.container}>
                            <FlatList
                //pass your state in data
                data={this.state.tableData3}
                renderItem={({ item }) =>
                 <View>
                    <Text>{item}</Text>
                    //this render item render the data so you can show data as you 
                    want to.
                 </View>
                 }
                keyExtractor={item => item.id}
              />
                        </View>
            )
        }
    }
    const styles = StyleSheet.create({
        container: { flex: 1, backgroundColor: '#fff' },
        head0: { height: 80, backgroundColor: '#54beff' },
        head: { height: 40, backgroundColor: '#9febf5' },
        headText: { fontWeight: 'bold', fontSize: 20 },
        text: { margin: 10 },
    });

从react native导入{Flatlist}；
导出默认类InfoTable扩展组件{
建造师（道具）{
超级（道具）；
此.state={
tableHead0:[`${this.props.headerInfo.SHORT_TEXT}（${（this.props.headerInfo.ORDERID）.replace（/^0+/，“”）}）`，
表3:[“香蕉”]，
表3：[
['APPLE'，`${this.props.headerInfo.COSTCENTER_TXT}（${（this.props.headerInfo.COSTCENTER）}）`，
['MONKEY'，`${this.props.headerInfo.LOC_WBS_ELEM_TXT}（${this.props.headerInfo.LOC_WBS_ELEM}）`，
['FRIZ'，`${this.props.headerInfo.settleOrder_TXT}（${this.props.headerInfo.settleOrder}）`，
]
}
}
组件将接收道具（下一步）{
if（nextrops.headerInfo！=null）{
this.setState（{tableHead0:[nextrops.headerInfo]}）
}
警报（JSON.stringify（nextrops））
}
render（）{
const state=this.state；
返回(
{item}
//此渲染项渲染数据，以便您可以在需要时显示数据
想。
}
keyExtractor={item=>item.id}
/>
)
}
}
const styles=StyleSheet.create({
容器：{flex:1，背景色：'#fff'}，
head0:{高度：80，背景色：'#54beff'}，
头部：{高度：40，背景颜色：'#9febf5'}，
标题文本：{fontWeight:'bold'，fontSize:20}，
正文：{页边空白：10}，
});

render item

中的

item

包含所有数据并将其打印，如果它包含100个项目，它将在列表中打印，您可以滚动它，Flatlist仅用于数组数据

---

希望对您有所帮助，不要有任何疑问。

您正在使用哪个库进行swiper，使用日志检查您获得了哪些道具这是一个链接：使用console.log（this.props）在设置状态并检查哪些数据是UGETTING之前，我将上面的代码更改为我的初始代码：我想显示数据的初始情况如何循环数据，然后在刷卡器中显示？我不确定我是否理解这个问题！你想浏览一下你拥有的不同版本的

tableHeadN

和

tableDataN

吗？我是react native的新手，你能用上面的代码给我写下你所有的解决方案吗？我更新了最新的答案，请检查并进行投票。我不明白“Swiper”的所有部分在哪里？你能告诉我我的代码和你的解决方案吗？因为Swiper的所有部分都丢失，并且没有Swiper as flatlist将自动创建Swiper as Own Swiper在my flatlist关键字中添加一个链接，请检查它是如何工作的

 import {Flatlist} from react-native;
    export default class InfoTable extends Component {
        constructor(props) {
            super(props);
            this.state = {
                tableHead0: [`${this.props.headerInfo.SHORT_TEXT} (${(this.props.headerInfo.ORDERID).replace(/^0+/, '')})`],
                tableHead3: ['BANANA'],
                tableData3: [
                    ['APPLE', `${this.props.headerInfo.COSTCENTER_TXT} (${(this.props.headerInfo.COSTCENTER)})`],
                    ['MONKEY', `${this.props.headerInfo.LOC_WBS_ELEM_TXT} (${this.props.headerInfo.LOC_WBS_ELEM})`],
                    ['FRIZ', `${this.props.headerInfo.SETTLORDER_TXT} (${this.props.headerInfo.SETTLORDER})`],
                ]
            }
        }

        componentWillReceiveProps(nextProps) {
            if (nextProps.headerInfo != null) {
                this.setState({ tableHead0: [nextProps.headerInfo] })
            }
            alert(JSON.stringify(nextProps))
        }

        render() {
            const state = this.state;
            return (
             <View style={styles.container}>
                            <FlatList
                //pass your state in data
                data={this.state.tableData3}
                renderItem={({ item }) =>
                 <View>
                    <Text>{item}</Text>
                    //this render item render the data so you can show data as you 
                    want to.
                 </View>
                 }
                keyExtractor={item => item.id}
              />
                        </View>
            )
        }
    }
    const styles = StyleSheet.create({
        container: { flex: 1, backgroundColor: '#fff' },
        head0: { height: 80, backgroundColor: '#54beff' },
        head: { height: 40, backgroundColor: '#9febf5' },
        headText: { fontWeight: 'bold', fontSize: 20 },
        text: { margin: 10 },
    });