时间戳

首页 > 解决方案 > 如何在选择或单击列表中的单个项目时更新 FlatList 中所有项目的 UI 设计

react-native - 如何在选择或单击列表中的单个项目时更新 FlatList 中所有项目的 UI 设计

问题描述

如何在选择或单击列表中的单个项目时更新 FlatList 中所有项目的 UI 设计。我已经尝试过我能想到的可能结果 flatlist 属性 extradata 仅在数据发生更改时才有效，否则它不起作用，还将值从子组件传递给父组件并更改 flatlist 的属性之一以重新渲染

这是我在子组件的回调中更改数据数组的代码：

export default class CombinedScreenList extends React.Component {
constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
      isLongPress: false,
      ref: false,
      index: 1
    };
  }
callBackFuncForChild = (passData) =>{ 

    this.setState({isLongPress: passData});
    this.setState({data: []});
    this.makeRequest();

}
async makeRequest(){
    this.makeRemoteRequest();
  }
  async componentWillMount(){
    this.makeRemoteRequest();
  }
  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=2`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
        //jsonResponseData = JSON.stringify(res.results);
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };
  render() {
    return (
      // <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      //   <Text>{this.props.data}</Text>
      // </View>
      <View style={{flex: 1}}>
       <FlatList
          data={this.state.data}
          extraData={this.state.refreshing}
          renderItem={({ item }) => (
               <ExpensesTileHeader content = {item} longPressParentFunc = {this.callBackFuncForChild} 
               isSelection = {this.state.isLongPress}/>
          )
          }
        />
        </View>
    );
  }
}

标签： react-native

解决方案

正如react-native flatlist的文档所示

额外数据

用于告诉列表重新渲染的标记属性（因为它实现了 PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data 属性之外的任何内容，请将其粘贴在这里并一成不变地对待它。

您可以在 flatlist 中添加 extraData 字段作为道具

<FlatList
  extraData={this.state}
/>

和 onselection 设置isLongPress to true触发平面列表重新渲染后的状态变化，并且在 renderItem 中根据this.state.isLongPress值切换 ui 样式

并在回调函数中将您的状态更新为一个函数

this.setState({
 isLongPress: passData,
 data:[]
})

希望它能解决你的问题

推荐阅读