有没有办法使用key访问行,使用FlatList中的keyExtractor进行设置 .
我使用FlatList来按数据填充,我需要使用它的键单独获取一行,以便更新该行而不重新渲染整个视图 .
在 componentWillMount 上我使用api调用填充了datalist数组 .
虚拟阵列看起来这个
[{id:“Usr01”, Headers :“Name1”},{id:“Usr02”, Headers :“Name2”},...]
按任何一行我得到它的ID,我需要使用它的密钥访问该行 .
让dataitem = this.state.datalist [id];
而我控制台dataitem我得到了未定义
我将id设置为keyExtractor中的键,有没有办法做同样的事情 .
我的代码看起来像这样
FlatListScreen.js
export default class FlatListScreen extends Component {
constructor(props)
{
super(props);
this.state={
datalist: [],
}
}
componentWillMount() {
ApiHandler.getlistitem('All').then(response =>{
this.setState({datalist: response});
});
}
_keyExtractor = (item, index) => item.id;
_onPressItem = (id) => {
let dataitem = this.state.datalist[id];
const { name } = dataitem
const newPost = {
...dataitem,
name: name+"01"
}
this.setState({
datalist: {
...this.state.datalist,
[id]: newPost
}
})
};
_renderItem ({ item }) {
return (
<MyListItem
id={item.id}
onPressItem={this._onPressItem}
title={item.title}
/>
)
}
render() {
return (
<FlatList
data={this.state.datalist}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
}
}
MyListItem.js
export default class MyListItem extends Component {
constructor(props) {
super(props)
this.state = {
title: '',
id: ''
}
}
componentWillMount() {
const { title, id } = this.props
this.setState({ title, id })
}
componentWillReceiveProps(nextProps) {
const { title, id } = nextProps
this.setState({ title, id })
}
shouldComponentUpdate(nextProps, nextState) {
const { title} = nextState
const { title: oldTitle } = this.state
return title !== oldTitle
}
render() {
return (
<View>
<TouchableOpacity onPress={() =>this.props.onPressItem({id:this.state.id})}>
<View>
<Text>
{this.props.title}
</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
1 回答
我想改变
onPressItem({id:this.state.id});
至
onPressItem(this.state.id);
在您的子组件中要么
至
在您的父组件中将解决问题 .
当您将它作为对象从子节点发送到父节点时,您也可以像这样访问它