程序员经验分享-hwhale

使用 React 过滤列表

2024-03-20

嗯，我没有看到我的遗漏，但我得到一个空白页面，其中有控制台错误：

Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
    at Users.render (Users.js:9)

显然我使用“filter()”不正确。我环顾四周，但没有发现任何与“React”相关的内容。有人可以帮忙吗？以下是文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Users from './Users';

ReactDOM.render(
  <Users list={[
    { name: 'Tyler', friend: true },
    { name: 'Ryan', friend: true },
    { name: 'Michael', friend: false },
    { name: 'Mikenzie', friend: false },
    { name: 'Jessica', friend: true },
    { name: 'Dan', friend: false }
    ]}
  />,
  document.getElementById('root')
);

Users.js

import React from 'react';

class Users extends React.Component {
  render() {
    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {this.props.list.friend.filter(function (friend) {
            return <li>{friend[0] === 'true'}</li>
        })}
        </ul>

        <hr />

        <h1>Non Friends:</h1>
        <ul>
          {this.props.list.friend.filter(function (nonFriend) {
            return <li>{nonFriend[0] === 'false'}</li>
          })}
        </ul>
      </div>
    );
  }
}

export default Users;

好的，看起来“Users.js”应该是：

import React from 'react';

class Users extends React.Component {
  render() {
    let friends = this.props.list.filter( function (user) {
      return user.friend === true
    });

    let nonFriends = this.props.list.filter( function (user) {
      return user.friend !== true
    });

    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {friends.map(function (user) {
            return <li key={user.name}>{user.name}</li>
          })}
        </ul>
        <h1>Non Friends:</h1>
        <ul>
          {nonFriends.map(function (user) {
            return <li key={user.name}>{user.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

export default Users;

甚至是这个：

import React from 'react';

class Users extends React.Component {
  render() {
    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {this.props.list.filter(function (user) { // filter first for friends
            return user.friend === true // returns a new array
          }).map(function (user) {  // map the new array to list items
            return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
          })}
        </ul>

        <hr />

        <h1>Non Friends:</h1>
        <ul>
          {this.props.list.filter(function (user) { // filter first for non-friends
            return user.friend !== true // returns a new array
          }).map(function (user) {  //map the new array to list items
            return <li key={user.name}>{user.name}</li> // don't forget unique key for each item
          })}
        </ul>
      </div>
    );
  }
}

export default Users;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Arrays

ReactJS

Filtering

使用 React 过滤列表 的相关文章

随机推荐

  • BigQuery，使用线性插值填充缺失值

    我在 Bigquery 中有一个表 每 30 分钟显示一次数据 我想每 5 分钟显示一次数据 目前我正在使用此查询用现有值填充空值 SELECT SETTLEMENTDATE DUID LAST VALUE SCADAVALUE ignor

  • 保留原始权重的加权双峰二分图投影

    我有一个大的 36k 个顶点 50k 个边 加权双峰二分图 我想生成一个投影 它不仅像默认加权实现一样计算邻居数量 而且还对边上的权重求和 您可以将其视为包含黑色顶点和蓝色顶点的二部图 当只有蓝色顶点时 我想保留原始图的权重 我遇到的实现保

  • Rails_admin：我应该有 admin_user 或具有管理员角色的用户来管理用户和管理面板

    在我的 Rails 应用程序网站中 访问者可以注册并创建内容 它使用带有用户模型的设计 一切正常 现在我想使用rails admin 来管理网站资源和用户等 并且只有具有管理特权的人才能访问它 我应该为管理面板访问创建一个单独的 Admin

  • 将 Json 中的数据解析为 Picasso 的图像集合

    我尝试解析图像集合recyclerview as gridview using Picasso图书馆 但我无法让它工作 注意 我没有任何错误 但不工作 这是 Json 数据a link https itunes apple com jo r

  • 如何为容器拥有不同的webapp资源：SBT中的启动和打包任务

    我有一个带有纯 JS 前端和 Scala 后端的 Web 应用程序 我想在我的构建管道中使用 Grunt 来处理src main web应用程序进入目标分布 网络应用程序我还想保留原始的 JS 和 HTML 文件以使用容器进行本地测试 启动

  • 在简单但大的数据库中对小集合进行 mongoDB 查询速度慢得离谱

    所以我在 mongoDB 中有一个超级简单的数据库 其中有一些集合 gt show collections Aggregates lt count 92 Users lt count 68222 Pages lt count 1728288

  • 使用ServletFileUpload的parseRequest进行文件上传？ [复制]

    这个问题在这里已经有答案了 我上传我浏览的文件input type file 在我的网络应用程序中 问题是我得到了FileItem列表大小为 0 尽管我可以在下面看到所有上传的文件信息 request gt JakartaMutltiPar

  • 如何在本地调试 Azure Function QueueTrigger

    我正在开发一个天蓝色函数 它将由天蓝色存储队列触发 对于 HTTPTrigger 我们可以在本地进行调试 但我无法找到在本地调试 QueueTrigger 的方法 你们中的任何人都可以告诉我如何使用 QUEUETRIGGER 在本地框运行功

  • 如何在 JSF 2.0 中创建自定义 404 消息？

    目前在我的应用程序中 当用户在地址栏中键入一些非法目的地时 会看到以下内容 我想让它变得更漂亮 并使用我自己的标记和一些 CSS 对其进行自定义 我需要在我的应用程序上进行编程还是必须在应用程序服务器中进行配置 如果我想这样做 我应该从哪里

  • 何时使用 OrderByCompletion (Jon Skeet) 与 Parallel.ForEach 与异步委托

    最近 伦敦 NDC 的 Jon Skeet 谈到了 C 5 async await 并提出了 按完成顺序排序 异步任务列表 链接http msmvps com blogs jon skeet archive 2012 01 16 eduas

  • Django Celery 应用程序 - 没有名为 celery 的模块错误

    我创建了一个 django celery 应用程序 如教程中所示 http docs celeryproject org en master django first steps with django html http docs cel

  • 从 OpenCV 代码到 FPGA 代码的转换是否比 Matlab 代码更容易？ [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想做一个关于图像处理的项目 我想知道如果我想在FPGA上实现这个项目 我应该在第一阶段选择Matla

  • 从文本文件中读取变量

    我正在尝试创建一个密码提示 它将用户输入与文本文件中的信息进行比较 密码保存在 txt 文件中 我尝试使用通过命令提示符和该网站提供给我的信息 但我无法让它工作 可能是因为我没有足够的经验 因为我对高级批量编码相当陌生 这是我到目前为止所想

  • 规格用于 JUnit XML 输出 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 在哪里可以找到 JUnit 的 XML 输出规范 我的目标是编写一个 UnitTest XML 报告器

  • 使 getContentResolver() 在扩展 Fragment 类的类中工作

    我想要的是使用两个片段 第一个片段显示联系人列表 第二个片段显示上方片段中选择的联系人的详细信息 我用来扩展的类Fragment类不允许我使用getContentResolver 由于上下文问题而导致的方法 现在 我尝试获取扩展 Fragm

  • 禁用除 DIV 元素之外的所有内容

    我在 div 元素中有一个视频播放器 我想禁用除 DIV 之外的所有内容 一种方法是使用 lightbox 但我想知道是否可以使用纯 HTML Javascript 来实现 我给你做了一个简单的例子 jQuery disable on cl

  • Kerberos：UPN 和 SPN 之间的区别

    我现在正在使用 GSSAPI 对跨平台应用程序进行 Kerberized 虽然我不清楚 UPN 和 SPN 之间的区别 开发环境是 CentOS 6 4 上的 Samba4 AD DC 服务器 带有 Windows Server 2008

  • 使用 numpy/sympy 查找线性系统的最小二乘整数解

    我需要用 numpy 或 sympy 求解线性丢番图方程组 有没有办法限制 numpy 的 linalg solve linalg lstsq 方法仅返回整数解 可能不是 但我想我应该问 我研究了 Sympy 的丢番图求解器 它似乎不适用于

  • 将十六进制字符串（hex）转换为二进制字符串

    我发现了以下十六进制到二进制转换的方法 String binAddr Integer toBinaryString Integer parseInt hexAddr 16 虽然此方法适用于较小的十六进制数字 但如下所示的十六进制数字 A14

  • 使用 React 过滤列表

    嗯 我没有看到我的遗漏 但我得到一个空白页面 其中有控制台错误 Users js 9 Uncaught TypeError Cannot read property filter of undefined at Users render U

热门标签