首页 文章

如何使用react-native中的FlatList keyExtractor访问行

提问于
浏览
0

有没有办法使用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 回答

  • 0

    我想改变

    onPressItem({id:this.state.id});

    onPressItem(this.state.id); 在您的子组件中

    要么

    _onPressItem = (id) => { }
    

    _onPressItem = ({id}) => { }
    

    在您的父组件中将解决问题 .

    当您将它作为对象从子节点发送到父节点时,您也可以像这样访问它

    let dataitem = this.state.datalist[id.id];
    

相关问题