如何重新呈现单位列表?

React.js

Tony小胖

2020-03-16

与ListView不同,我们可以更新this.state.datasource。是否有任何方法或示例更新FlatList或重新呈现它?

我的目标是在用户按下按钮时更新文本值。

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

第1651篇《如何重新呈现单位列表?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

15个回答
西门Pro 2020.03.16

Flatlist的extraData对我不起作用,我碰巧正在使用来自redux的道具。这听起来与ED209答复中的评论类似。收到道具后,我最终手动调用setState。

componentWillReceiveProps(nextProps: StateProps) {
    if (this.props.yourProp != null && nextProps.yourProp) {
        this.setState({ yourState: processProp(nextProps.yourProp) });
    }
}


<FlatList
  data={this.state.yourState}
  extraData={this.state.yourState}
/>

对于那些使用> React 17的用户,请使用getDerivedStateFromProps

Pro阿飞Davaid 2020.03.16

只需使用:

onRefresh={true}

flatList组件内部

斯丁乐 2020.03.16

这里只是先前答案的扩展。确保两部分,请确保添加extraData且keyExtractor是唯一的。如果您的keyExtractor不变,则不会触发重新渲染。

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>
逆天泡芙神无 2020.03.16

在此示例中,要强制重新渲染,只需更改变量 machine

const [selected, setSelected] = useState(machine)

useEffect(() => {
    setSelected(machine)
}, [machine])
卡卡西逆天 2020.03.16

如果我们希望FlatList 知道数据同时更改prop和state,则可以构造一个同时引用prop和state的对象并刷新flatlist。

const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>

文件:https//facebook.github.io/react-native/docs/flatlist#extradata

TomNear前端 2020.03.16

我已替换为FlatListSectionList并且状态更改已正确更新。

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

唯一需要记住的是section具有diff结构:

const section = [{
  id: 0,
  data: this.state.data,
}]
小哥Pro梅 2020.03.16

我通过添加extraData={this.state}以下代码来解决此问题,请检查以下代码以获取更多详细信息

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.arr}
          extraData={this.state}
          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        />
      </View>
    );
  }
樱小小小小 2020.03.16

将因您的互动而更改的变量放在 extraData

您可以发挥创造力。

例如,如果您正在处理带有复选框的更改列表。

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>  
神无LEYMandy 2020.03.16

在react-native-flatlist中,它们是称为extraData的属性。将以下行添加到您的单位列表中。

 <FlatList
          data={data }
          style={FlatListstyles}
          extraData={this.state}
          renderItem={this._renderItem}
       />
JinJin飞云 2020.03.16

哦,很简单,只需使用 extraData

您会看到多余的数据在后台工作的方式是FlatListVirtualisedList,它只是通过常规方法检查对象是否已更改onComponentWillReceiveProps

因此,您所要做的就是确保您提供了一些可以更改的内容extraData

这是我的工作:

我正在使用immutable.js,所以我要做的就是传递包含我要观看的内容的Map(不可变对象)。

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

这样,当this.props.foothis.props.bar更改时,我们CustomComponentRow将进行更新,因为不可变对象将与之前的对象不同。

TomGil村村 2020.03.16

好的,我刚刚发现,如果我们想让FlatList知道数据prop之外的数据变化,我们需要将其设置为extraData,所以我现在这样做:

<FlatList data={...} extraData={this.state} .../>

参考:https : //facebook.github.io/react-native/docs/flatlist#extradata

逆天Pro逆天 2020.03.16

经过大量的搜索和寻找真正的答案,最后我得到了我认为是最好的答案:

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

我的主要问题是(KeyExtractor)我没有像这样使用它。不起作用:keyExtractor = {(item)=> item.ID}在我更改为它之后,它就像魅力一样工作,希望对您有所帮助。

伽罗L 2020.03.16

使用extraDataFlatList组件上属性。

如文档所述:

通过传递extraData={this.state}FlatList我们,确保更改FlatList时将重新呈现自己state.selected如果不设置此道具,FlatList将不知道它需要重新渲染任何项目,因为它也是a PureComponent,并且道具比较不会显示任何更改。

樱神奇 2020.03.16

快速简便的解决方案请尝试:

  1. 将额外的数据设置为布尔值。

    extraData = {this.state.refresh}

  2. 要重新渲染/刷新列表时,切换布尔状态的值

    this.setState({ 
        refresh: !this.state.refresh
    })
    
阿飞达蒙樱 2020.03.16

如果要有一个Button,则可以在onPress中使用setState更新数据。然后SetState将重新呈现您的FlatList。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android