首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React本机平面列表extraData不工作redux数据已更改

React本机平面列表是React Native中的一个组件,用于展示一个平面的列表数据。extraData是该组件的一个属性,用于指定当数据发生变化时需要重新渲染列表的依赖项。

在Redux中,当数据发生变化时,我们可以通过dispatch一个action来更新数据。然而,有时候我们会遇到一个问题,即使数据已经更新了,但列表并没有重新渲染。这时候就可以使用extraData属性来解决这个问题。

extraData属性接受一个任意类型的值作为参数,当这个值发生变化时,列表会重新渲染。通常情况下,我们可以将extraData设置为Redux store中的某个状态,这样当该状态发生变化时,extraData也会变化,从而触发列表的重新渲染。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { FlatList } from 'react-native';
import { useSelector } from 'react-redux';

const MyListComponent = () => {
  const [extraData, setExtraData] = useState(false);
  const data = useSelector(state => state.data);

  const handleDataChange = () => {
    // 更新数据
    // ...

    // 更新extraData
    setExtraData(!extraData);
  };

  return (
    <FlatList
      data={data}
      extraData={extraData}
      renderItem={({ item }) => <ListItem item={item} />}
    />
  );
};

export default MyListComponent;

在上面的代码中,我们使用useState来定义extraData的初始值,并通过setExtraData来更新extraData的值。当数据发生变化时,我们调用handleDataChange函数来更新数据并更新extraData的值,从而触发列表的重新渲染。

对于Redux的数据更新,我们可以使用相关的Redux中间件和工具来管理和处理。腾讯云提供了云开发服务,其中包括云函数、云数据库等功能,可以帮助开发者快速搭建和部署应用。您可以参考腾讯云云开发的相关文档和产品介绍来了解更多详情。

腾讯云云开发相关产品和产品介绍链接地址:

  • 云开发官网:https://cloud.tencent.com/product/tcb
  • 云函数:https://cloud.tencent.com/product/scf
  • 云数据库:https://cloud.tencent.com/product/tcb-database
  • 云存储:https://cloud.tencent.com/product/cos
  • 云开发文档:https://cloud.tencent.com/document/product/876
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2021年50个酷炫的Web和移动项目创意

编程级别:高级 项目类型:全栈 前端:HTML,CSS,TypeScript,ReactReduxReact本机 后端:Node.Js,NoSQL 2.约会应用管理器 一款使您轻松管理约会生活的应用程序...因此,您不必提交通常的无聊工作申请,而必须提交简历,然后等待一封通用电子邮件,告诉您他们已经收到您的申请,并且会尽快回复您。相反,如果您认为这是匹配项,则可以刷卡,如果您认为匹配,则可以刷卡。...编程级别:中级 项目类型:全栈 前端:HTML,CSS,JavaScript,ReactReduxReact本机 后端:Node.Js,NoSQL 17.电视跟踪应用 这可能是一个简单的应用程序...编程级别:中级 项目类型:全栈 前端:HTML,CSS,JavaScript,ReactReduxReact本机 后端:Node.Js,NoSQL 35.粮食社会网络 创建一个美食社交网络会很有趣...编程级别:中级 项目类型:全栈 前端:HTML,CSS,JavaScript,ReactReduxReact本机 后端:Node.Js,NoSQL 38.会话生成器应用 这样的应用程序可以使用机器学习

4.2K21

React Native列表之FlatList开发实用教程

本文出自教程《新版React Native+Redux打造高质量上线App》——将带你解锁React Native开发应用新姿势,一网打尽React Native新版本热门技术。...在React Native的早期版本中列表通常使用ListView来实现,新版React Native推荐我们使用FlatList来实现列表,那么为什么推荐使用FlatList列表呢?...限制渲染窗口还可以减少React和本地平台的工作量,例如View遍历。 即使你渲染了最后的一百万个元素,用这些新的列表也不需要渲染所有的元素来完成遍历。...extraData?: any 如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。...参考资料 新版React Native+Redux打造高质量上线App

6.5K00
  • 「首席架构师推荐」React生态系统大集合

    图像 模型库 数据管理 地图 图表 React原生 React本机常规资源 React原生社区 React原生教程 React原生开发工具 React原生样本应用程序 React Native Boilerplates...React原生 使用React构建本机应用程序的框架 React本机常规资源 React原生官方网站 React Native GitHub React原生通讯 React本机游乐场 React Native...创建React Native App - 在没有构建配置的任何操作系统上创建React Native应用程序,包含或包含Expo Snowflake - 使用Redux,Parse.com,Jest(...Redux GitHub Redux官方网站 很棒的Redux列表 Redux工具 react-redux - Redux的官方React绑定 redux-devtools - Redux的DevTools...无头CMS GraphQL CMS Mongoose模式到GraphQL GraphQL桥接到REST API GraphQL Playground - GraphQL IDE,用于更好的开发工作流程

    12.4K30

    【19】进大厂必须掌握的面试题-50个React面试

    一旦完成计算,将仅使用实际更改的内容来更新实际DOM。 8.为什么浏览器无法阅读JSX? 浏览器只能读取JavaScript对象,而不能读取普通JavaScript对象中的JSX。...每个React组件必须强制具有render()。它返回单个React元素,它是本机DOM组件的表示形式。如果需要渲染多个HTML元素,则必须将它们组合在一个封闭的标记内。...有状态组件 无状态组件 1.将有关组件状态更改的信息存储在内存中 1.计算组件的内部状态 2.有权更改状态 2.无权更改状态 3.包含状态的过去,当前和将来可能发生的变化的知识 3.包含过去,当前和将来可能发生的状态变化的知识...如果不需要完成任何工作,它将按原样返回以前的状态。 43.在Redux中存储的意义是什么?...因此,Redux非常简单且可预测。我们可以将中间件传递给商店以处理数据处理,并保留更改商店状态的各种操作的日志。所有动作都通过减速器返回新状态。 44. Redux与Flux有何不同?

    11.2K30

    使用react的7个避坑案例

    组件臃肿 React开发者没有创建必要的足够多的组件化,其实这个问题局限于React开发者,很多Vue开发者也是。...直接更改state 在React中,状态应该是不变的。如果你直接修改state,会导致难以修改的性能问题。...当列表比较庞杂并需要进行更改等操作的时候,就会带来渲染的问题。 React跟踪文档对象模型(DOM)上的所有列表元素。没有记录可以告知React列表发生了什么改动。...解决这个问题,你需要添加keys在你的列表元素中。keys赋予每个元素唯一标识,这有助于React确定添加,删除,修改了哪些项目。...频繁使用Redux 在大型的React app中,很多开发者使用Redux来管理全局状态。 虽然Redux很有用,但是没必要使用它来管理每个状态。

    64120

    前端工程师的20道react面试题自检

    Redux 原理及工作流程(1)原理 Redux源码主要分为以下几个模块文件compose.js 提供从右到左进行函数式编程createStore.js 提供作为生成唯一store的函数combineReducers.js...,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储,中间人,当Reducers的更新完成以后会通过store的订阅来通知react component,...React 中的key是什么?为什么它们很重要?key可以帮助 React跟踪循环创建列表中的虚拟DOM元素,了解哪些元素更改、添加或删除。...这个时候mvvm出现了,mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更新,dom的更新也可以直接同步我们数据更改,这个特定可以大大降低我们手动去维护dom更新的成本,mvvm为react...shouldUpdateComponent,建议开发者进行更改,这使得我们使用mobx开发项目的时候可以简单快速的完成很多功能,连redux的作者也推荐使用mobx进行项目开发。

    90140

    做了N+1个企业项目之后, 我总结了这些React必备插件

    为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 ?...Redux JavaScript 状态容器,提供可预测化的状态管理 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Redux Thunk Redux的异步处理中间件 Redux Saga Redux...中间件,用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等) Dva 一个基于 reduxredux-saga 的数据流方案 2....desktop 基于React的JavaScript库,旨在将本机桌面体验带入网络,其中包含许多macOS Sierra和Windows 10组件。...react-grid-layout 强大的网格拖拽排序缩放库 mixitup 强大的列表卡片排序动画库 7.

    2K10

    React进阶(3)-上手实践Redux-如何改变store中的数据

    前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新...,会不断会讲到 具体更改store的实例代码如下所示: import React from 'react'; import ReactDOM from 'react-dom'; import { Input.../>, container); 具体的效果如下所示 通过上面新添加的action代码,实现一个更改store的数据,并达到了与页面更新的操作 再次来梳理一下更改store的数据的一个过程,经历了哪些具体操作...函数中,调用getState()方法,从而获得了state的数据,最终显示到页面上 而如果想要更改store的数据,租户想要换携带有沙发,电视等大房子,这个具体的动作就是action,首先换房子是一个动作...,虽然Redux比较绕,但都是有固定的套路流程的,其中理解Redux工作流程是非常重要的 主要开始用ant-design这个UI组件库对todolist做了一个简单的布局,然后如何将组件的数据抽离到Redux

    2.6K30

    React进阶(3)-上手实践Redux-如何改变store中的数据

    撰文 | 川川 前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据...的调试功能,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到 具体更改store的实例代码如下所示: import React...通过上面新添加的action代码,实现一个更改store的数据,并达到了与页面更新的操作 再次来梳理一下更改store的数据的一个过程,经历了哪些具体操作 1....(删除列表) 以下是具体的实例代码 import React from 'react'; import ReactDOM from 'react-dom'; import { Input, Button...,虽然Redux比较绕,但都是有固定的套路流程的,其中理解Redux工作流程是非常重要的 主要开始用ant-design这个UI组件库对todolist做了一个简单的布局,然后如何将组件的数据抽离到Redux

    2.2K20

    滴滴前端常考react面试题(附答案)

    key可以帮助 React跟踪循环创建列表中的虚拟DOM元素,了解哪些元素更改、添加或删除。每个绑定key的虚拟DOM元素,在兄弟元素之间都是独一无二的。...Redux 状态管理器和变量挂载到 window 中有什么区别两者都是存储数据以供后期使用。...但是Redux状态更改可回溯——Time travel,数据多了的时候可以很清晰的知道改动在哪里发生,完整的提供了一套状态管理模式。...一些库如 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是,React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。...为了合并setState,我们需要一个队列来保存每次setState的数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。react-redux 的实现原理?

    2.3K10

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    撰文 | 川川 前言 撰文:川川 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...subscribe方法,通时还得监听一个事件处理函数 用于重新在一次获取store的数据使页面同步更新 在上几次编写Redux的代码中,创建store,reducer,acton,以及actionTypes...(动作类型)都是放在一个文件当中进行编写的,然而更改store可能有多个action动作,所有代码杂糅在一起,后期维护起来显然是非常痛苦的 所以有必要进行将Redux代码进行按照特定的职责,功能结构进行拆分的...工作流程中的右半边部分,也就是做了action的拆分管理,那么接下来是整理store和reducer以及React Component了 在store文件夹中创建一个index.js的文件 这个index.js...,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux工作流程不是很清晰,难免会有所懵逼,发现,写着,写着,找不到头绪,不知道自己在写些什么的

    1.7K10

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    image.png 前言 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...subscribe方法,通时还得监听一个事件处理函数 用于重新在一次获取store的数据使页面同步更新 在上几次编写Redux的代码中,创建store,reducer,acton,以及actionTypes...(动作类型)都是放在一个文件当中进行编写的,然而更改store可能有多个action动作,所有代码杂糅在一起,后期维护起来显然是非常痛苦的 所以有必要进行将Redux代码进行按照特定的职责,功能结构进行拆分的...工作流程中的右半边部分,也就是做了action的拆分管理,那么接下来是整理store和reducer以及React Component了 在store文件夹中创建一个index.js的文件 这个index.js...,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux工作流程不是很清晰,难免会有所懵逼,发现,写着,写着,找不到头绪,不知道自己在写些什么的

    1.9K11

    为什么我不再用Redux

    现在,前端开发中的很大一部分负担来自于我们的全局存储的维护工作,我们还要确保这些存储不会遭受状态错误、数据非规范化和陈旧数据的困扰。...React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks,用于管理查询(获取数据)和突变(更改数据)。...要对比这个库和 Redux 的话,我们来看这两种方法的一个代码示例。我使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取的简单 TODO 列表。...你可以在全局级别设置缓存配置,然后就可以忘掉它了——一般来说它足以完成你期望的工作。有关其幕后工作机制的更多信息,请通过下方链接查看 React Query 文档。...要更改后端状态时,React Query 提供了 useMutation hook。

    2.6K20

    【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

    15、当调用setState时,React render 是如何工作的 16、React 中 key 的重要性是什么? 17、什么是Redux?...7、React事件处理 React中的事件处理程序将传递SyntheticEvent实例,该实例是React跨浏览器本机事件的跨浏览器包装器。...这些综合事件具有与您惯用的本机事件相同的界面,除了它们在所有浏览器中的工作方式相同. React实际上并未将事件附加到子节点本身。...React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX 10、为什么直接更新state状态 如果直接更新state状态,那么它将不会重新渲染组件,而是使用...开发人员工具 - 从操作到状态更改,开发人员可以实时跟踪应用中发生的所有事情。 社区和生态系统 - Redux 背后有一个巨大的社区,这使得它更加迷人。

    7.6K10

    设计师都能懂的 Redux 指南

    他们中的许多人都知道 ReduxReact 一起工作,它的工作是状态管理。 本文的目的就是让你对 Redux 有更全面的认知: 它能做什么?为什么它要这样设计?何时使用它?...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。 更改数据的代码必须像数学公式一样。 在相同输入的情况下,它必须返回相同的结果。...如同撤消/重做一样,Redux 也支持 Optimistic UI。 当从服务器收到否定结果时,可以轻松记录,重放和还原数据更改。...如果你使用 Redux 构建游戏,则只需要几行代码来保存/加载游戏进度,而无需更改其余代码。...陡峭的学习曲线 Redux 的学习曲线比较陡峭。 理解,记忆并习惯其模式需要时间。 如果你完全不会 ReduxReact推荐你两者同时学习。

    1.6K10

    从设计的角度看 Redux

    他们中的许多人都知道 ReduxReact 一起工作,它的工作是状态管理。 本文的目的就是让你对 Redux 有更全面的认知: 它能做什么?为什么它要这样设计?何时使用它?...为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。 这是一个有点复杂的工具,学习曲线相对陡峭,但这是否意味着我们作为设计师应该远离它? 。...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。 更改数据的代码必须像数学公式一样。 在相同输入的情况下,它必须返回相同的结果。...如同撤消/重做一样,Redux 也支持 Optimistic UI。 当从服务器收到否定结果时,可以轻松记录,重放和还原数据更改。...陡峭的学习曲线 Redux 的学习曲线比较陡峭。 理解,记忆并习惯其模式需要时间。 如果你完全不会 ReduxReact推荐你两者同时学习。

    1.7K30

    Redux入门实战——todo-list2.0实现

    状态是只读的 唯一改变 state 的方法就是触发 action,action 是一个用于描述发生事件的普通对象。...redux不会直接修改state,而是在状态发生更改时,返回一个全新的状态,旧的状态并没有进行更改,得以保留。可以使用 redux-devtools-extension 工具进行可视化查看。...在下文将深入讲一下 Provider 的实现和工作原理。...本项目功能较简单,因此代码直接按照文件目录给出,而按照功能模块陈列。...的一些基础概念,基本用法和如何如react进行结合,实现react的功能开发,主要内容包括redux基础,reduxreact结合,实例完成步骤,完整代码,项目演示等,比较适合刚接触redux的菜鸟阅读和学习

    1.4K10

    前端高频react面试题

    Redux 原理及工作流程(1)原理 Redux源码主要分为以下几个模块文件compose.js 提供从右到左进行函数式编程createStore.js 提供作为生成唯一store的函数combineReducers.js...提供合并多个reducer的函数,保证store的唯一性bindActionCreators.js 可以让开发者在直接接触dispacth的前提下进行更改state的操作applyMiddleware.js...,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储,中间人,当Reducers的更新完成以后会通过store的订阅来通知react component,...但是Redux状态更改可回溯——Time travel,数据多了的时候可以很清晰的知道改动在哪里发生,完整的提供了一套状态管理模式。...(1)componentWillReceiveProps(废弃)在react的componentWillReceiveProps(nextProps)生命周期中,可以在子组件的render函数执行前,

    3.4K20
    领券