React.js-从服务器获取数据并更新

埃里克贝

(这里是reactjs新手)...

我正在使用Reactjs创建一个页面

  • 一个简单的搜索框
  • 用户输入搜索文字
  • 从服务器获取数据并显示

现在,“ searchText”和“ data”是我的状态,我试图找出仅在从服务器接收到数据后才更新“结果”的方法。

我有一个事件,用户输入搜索文字时会处理

    handleUserInput: function(searchText) {
      this.loadDataFromServer(searchText);

      this.setState({
        searchText: searchText,
      });
    },

但是使用上述功能,会发生以下情况

  1. 初始数据已加载
  2. 用户输入内容
  3. 结果已立即更新,仅显示包含搜索文本的结果(下面的代码),但同时向服务器发出请求以获取结果(其中包含搜索文本的结果)

    this.props.products.forEach(function(product){if(product.name.toLowerCase()。indexOf(this.props.searchText)> -1){row = rows.push(row)}} .bind(this ));

  4. 大约一秒钟后,从服务器接收到新数据,并再次刷新结果。

显然我想做的是

  1. 加载初始数据
  2. 用户类型搜索文字
  3. 从服务器请求数据
  4. 从服务器接收数据
  5. 更新结果

实现此目标的正确方法是什么?

道格拉斯

因此,这只是您要停止的第一次刷新,对吗?

如果一旦结果来自服务器,它已经在刷新,那么看来您所要做的只是在步骤3中不对客户端上的结果进行过滤-那么将首先生成相同的虚拟DOM,因此结果服务器响应后,list只会更新实际的DOM。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React.js-从服务器获取数据并更新

来自分类Dev

React:从服务器获取更新的数据而不刷新

来自分类Dev

使用React.js更新服务器状态?

来自分类Dev

使用React.js更新服务器状态?

来自分类Dev

Apache服务器上的React,JS

来自分类Dev

使用 React.js 和 Express.js POST 表单数据到服务器

来自分类Dev

如何更新来自React.js中Web套接字服务器的值?

来自分类Dev

如何更新来自React.js中Web套接字服务器的值?

来自分类Dev

获取API在POSTMAN和Express服务器上工作,但在React js上不工作

来自分类Dev

如何从快速后端服务器获取图像并将其显示到 React js 前端?

来自分类Dev

在 React 中使用 Fetch 从服务器获取数据

来自分类Dev

如何从Js fetch()获取数据到服务器?

来自分类Dev

如何在React.js中将服务器端Json数据转换为react-google-chart格式

来自分类Dev

React.js是否需要服务器端?

来自分类Dev

使用.net渲染React JS服务器端

来自分类Dev

React JS服务器端渲染教程

来自分类Dev

在React JS中监控多个服务器状态

来自分类Dev

react.js 测试节点服务器是否运行

来自分类Dev

React JS 动态数据获取

来自分类Dev

Angular.js-使用$ http从远程服务器获取数据来显示数据

来自分类Dev

使用Java的React.js服务器端渲染[没有Node.js]

来自分类Dev

Socket.io Node Js服务器和React js客户端未连接

来自分类Dev

从 React.js 组件到 Node.js 服务器的 POST 请求问题

来自分类Dev

我在哪里可以从React Redux应用程序的服务器中获取初始数据?

来自分类Dev

React-Router服务器端渲染和Ajax获取数据

来自分类Dev

在React Native中使用iOS设备从服务器获取数据

来自分类Dev

React Redux 服务器呈现但客户端获取数据

来自分类Dev

使用 Node/React 进行服务器端渲染。我如何获取数据?

来自分类Dev

如何将数据从服务器端 (Express.js) 发送到客户端 (React.js)?

Related 相关文章

  1. 1

    React.js-从服务器获取数据并更新

  2. 2

    React:从服务器获取更新的数据而不刷新

  3. 3

    使用React.js更新服务器状态?

  4. 4

    使用React.js更新服务器状态?

  5. 5

    Apache服务器上的React,JS

  6. 6

    使用 React.js 和 Express.js POST 表单数据到服务器

  7. 7

    如何更新来自React.js中Web套接字服务器的值?

  8. 8

    如何更新来自React.js中Web套接字服务器的值?

  9. 9

    获取API在POSTMAN和Express服务器上工作,但在React js上不工作

  10. 10

    如何从快速后端服务器获取图像并将其显示到 React js 前端?

  11. 11

    在 React 中使用 Fetch 从服务器获取数据

  12. 12

    如何从Js fetch()获取数据到服务器?

  13. 13

    如何在React.js中将服务器端Json数据转换为react-google-chart格式

  14. 14

    React.js是否需要服务器端?

  15. 15

    使用.net渲染React JS服务器端

  16. 16

    React JS服务器端渲染教程

  17. 17

    在React JS中监控多个服务器状态

  18. 18

    react.js 测试节点服务器是否运行

  19. 19

    React JS 动态数据获取

  20. 20

    Angular.js-使用$ http从远程服务器获取数据来显示数据

  21. 21

    使用Java的React.js服务器端渲染[没有Node.js]

  22. 22

    Socket.io Node Js服务器和React js客户端未连接

  23. 23

    从 React.js 组件到 Node.js 服务器的 POST 请求问题

  24. 24

    我在哪里可以从React Redux应用程序的服务器中获取初始数据?

  25. 25

    React-Router服务器端渲染和Ajax获取数据

  26. 26

    在React Native中使用iOS设备从服务器获取数据

  27. 27

    React Redux 服务器呈现但客户端获取数据

  28. 28

    使用 Node/React 进行服务器端渲染。我如何获取数据?

  29. 29

    如何将数据从服务器端 (Express.js) 发送到客户端 (React.js)?

热门标签

归档