个人中心
gpt4 book ai didi

javascript - 带过滤器的 React JS 表

转载 作者：行者123 更新时间：2023-12-03 00:14:47 24 4
gpt4 key购买 nike

我正在尝试调整在react js文档中找到的这个表here并遇到了一些奇怪的问题，如下面的屏幕截图所示。 enter image description here

我们尝试对 lBir 进行过滤

enter image description here

最终结果是我得到了额外的行。这是最精彩的代码。

import React from 'react';
import ReactDOM from 'react-dom';
  
  class UserRow extends React.Component {
    render() {
      const user = this.props.user;
      const name = user.name;
  
      return (
        <tr>
          <td>{name}</td>
          <td>{user.system}</td>
        </tr>
      );
    }
  }
  
  class UserTable extends React.Component {
    render() {
      const filterText = this.props.filterText;  
      const rows = [];  
      this.props.users.forEach((user) => {
        console.log(this.props.users);
        if (user.name.indexOf(filterText) === -1) {
        //   console.log('filter text = -1')
          return;
        }
        rows.push(
          <UserRow
            user={user}
            key={user.name}
          />
        );
      });
  
      return (
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>system</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      );
    }
  }
  
  class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    }
    
    handleFilterTextChange(e) {
      this.props.onFilterTextChange(e.target.value);
    }
    
    render() {
      return (
        <form>
          <input
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            onChange={this.handleFilterTextChange}
          />
        </form>
      );
    }
  }
  
  class FilterableUserTable extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        filterText: ''      
    };
      
      this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    }
  
    handleFilterTextChange(filterText) {
        console.log(filterText);
      this.setState({
        filterText: filterText
      });
    }
    
    render() {
      return (
        <div>
          <SearchBar
            filterText={this.state.filterText}
            onFilterTextChange={this.handleFilterTextChange}
          />
          <UserTable
            users={this.props.users}
            filterText={this.state.filterText}
          />
        </div>
      );
    }
  }
  
  
  const USERS = [
    {name: 'lJames', system: 'test@testy.com'},
    {name: 'lJames', system: 'test@tester.com'},
    {name: 'lBird', system: 'lbird@moretesting.com'},
    {name: 'mJordan', system: 'lbird@somemore.com'},
    {name: 'tester', system: 'mjordan@nba.com'},
  ];
  
  ReactDOM.render(
    <FilterableUserTable users={USERS} />,
    document.getElementById('container')
  );
  
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="container"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

我可以在控制台中看到以下警告:“警告:遇到两个具有相同 key lJames 的子项。 key 应该是唯一的，以便组件在更新时保持其身份。非唯一的 key 可能会导致子项重复和/或省略 — 这种行为不受支持，并且可能会在未来版本中更改。”

任何帮助将不胜感激!

最佳答案

React 使用键作为识别列表中组件的方式，并且它们在该列表中应该是唯一的 (React docs) 。如果多个组件具有相同的 key ，则可能会导致类似于您所看到的问题(因为您使用 name 作为 key ，并且两个用户的名称为 lJames )。

您可以通过为每个用户提供唯一的 id 属性或使用连接的用户和电子邮件作为键来解决此问题 - key={user.name + user.system}

关于javascript - 带过滤器的 React JS 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54564527/

24 4 0
文章推荐： javascript - CKEditor 5 React 自定义图片上传
文章推荐： freeradius - 如果语句的评估不一致
文章推荐： module - 在 FreeRADIUS C 模块中以编程方式将 VSA(供应商特定属性)添加到访问接受回复
文章推荐： javascript - 将 Javascript 输入值传递到 PHP 文件以发布到 SQlite
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com