所以我做了很多React Web开发。 React Native并不多，但这对我来说真的很疯狂。我有这个组件
相关代码
componentDidMount()
axios.get(URL + 'ATL')
.then(function (response) {
// handle success
console.log("AXRES1::",response);
this.setState({
rows: response.data,
loading: false,
})
}.bind(this))
.catch(function (error) {
// handle error
console.log("AXRES2::",error.message);
this.setState({ loading: false })
}.bind(this))
.finally(function () {
console.log("AXRES3::");
this.setState({ loading: false })
}.bind(this));
}
render() {
const placeholder = {
label: 'Select SSA Region...',
value: this.state.region,
color: '#093387',
};
console.log("ROWS::",this.state.rows.length)
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Swiper
from={1}
minDistanceForAction={0.1}
controlsProps={{
dotsTouchable: true,
prevPos: 'bottom-left',
nextPos: 'bottom-right',
nextTitle: '',
prevTitle: '',
nextTitleStyle: { color: '#2298f2', fontSize: 50, fontWeight: '500' },
prevTitleStyle: { color: '#2298f2', fontSize: 50, fontWeight: '500' }
}}
>
<View style={{ flex: 1 }}>
<Title style={styles.header}><Text h1>SSA Regional Locator App</Text></Title>
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Image
style={{}}
source={Images.USM}
/>
</View>
</View>
<View style={{ flex: 1 }}>
<Title style={styles.header}>Choose a Region</Title>
<Title style={styles.header}>Find an Office {this.state.rows.length}</Title>
<RNPickerSelect
placeholder={placeholder}
items={regions}
onValueChange={value => {
console.log("VALUE::",value);
this.setState({
region: value,
});
}}
style={pickerSelectStyles}
value={this.state.region}
useNativeAndroidPickerStyle={false}
/>
<DataTable>
<DataTable.Header style={headerStyles}>
<DataTable.Title><Subheading>RO Name</Subheading></DataTable.Title>
<DataTable.Title><Subheading>Email</Subheading></DataTable.Title>
<DataTable.Title numeric><Subheading>Business Line</Subheading></DataTable.Title>
<DataTable.Title numeric><Subheading>State</Subheading></DataTable.Title>
</DataTable.Header>
{this.state.rows.map((row, i) => {
const img = "../images/flags/" + row.stateCode + ".png"
// console.log("ROW2::", img);
return (
<DataTable.Row key={i} style={rowStyles}>
<DataTable.Cell style={rowStyles}>{row.name}</DataTable.Cell>
<DataTable.Cell style={rowStyles}>{row.email}</DataTable.Cell>
<DataTable.Cell style={rowStyles} numeric>{row.businessLine}</DataTable.Cell>
<DataTable.Cell style={rowStyles} numeric>
<Image
style={{ width: 16, height: 12 }}
source={Images.flags[row.stateCode]}
/>
</DataTable.Cell>
</DataTable.Row>
)
})}
<DataTable.Pagination
page={1}
numberOfPages={3}
onPageChange={(page) => { console.log(page); }}
label="1-2 of 6"
/>
</DataTable>
</View>
</Swiper>
</View>
</View>
);
};
}
我正在成功更新行。我可以查看控制台日志，该日志指示在渲染和返回之间控制台日志语句中的值从1更改为652行。
2019-09-13 15:54:10.109 2708-2976/com.regionlocator I/ReactNativeJS: 'ROWS::', 1
2019-09-13 15:54:12.613 2708-2976/com.regionlocator I/ReactNativeJS: 'ROWS::', 652
从我在此处检查的抓取中，数据也看起来正确
console.log("AXRES1::",response)
这是我期望的对象数组。但是我的数据表永远不会改变。也没有错误。我想念什么。我很困惑。
****还有一个重要的提示
我应该在最初发布时提到过，如果我取消注释console.log("ROW2::", img);，我会看到那些控制台日志反映了我提取的新数据。我发现这很奇怪，因为它显然不是在android模拟器中的新datatable项目中呈现的，因为这些项目显然已被映射。在React Native和仿真器中渲染是否有一些特别之处，也许我不知道。我感觉这确实会出现在React Web应用程序中。