Reactjs React数据表搜索组件未按应有方式呈现/工作

我正在为一个项目使用一个名为react datatable的npm包，我正在尝试构建一种搜索数据的方法。我发现有人能够这样做的回购；然而，他的反应技巧比我高，我似乎无法让他的代码在我这边正常工作。我只是想知道为什么它没有在我的前端渲染任何东西。任何建议都会有帮助。多谢各位

他的代码：

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import faker from 'faker';
import Button from '../shared/Button';
import DataTable from '../../../src/index';

const createUser = () => ({
  id: faker.random.uuid(),
  name: faker.name.findName(),
  email: faker.internet.email(),
  address: faker.address.streetAddress(),
  bio: faker.lorem.sentence(),
  image: faker.image.avatar(),
});

const createUsers = (numUsers = 5) =>
  new Array(numUsers).fill(undefined).map(createUser);

const fakeUsers = createUsers(2000);

const TextField = styled.input`
  height: 32px;
  width: 200px;
  border-radius: 3px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #e5e5e5;
  padding: 0 32px 0 16px;

  &:hover {
    cursor: pointer;
  }
`;

const ClearButton = styled(Button)`
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 34px;
  width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
`;


const FilterComponent = ({ filterText, onFilter, onClear }) => (
  <>
    <TextField id="search" type="text" placeholder="Filter By Name" aria-label="Search Input" value={filterText} onChange={onFilter} />
    <ClearButton type="button" onClick={onClear}>X</ClearButton>
  </>
);

const columns = [
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
  },
  {
    name: 'Email',
    selector: 'email',
    sortable: true,
  },
  {
    name: 'Address',
    selector: 'address',
    sortable: true,
  },
];

const BasicTable = () => {
  const [filterText, setFilterText] = React.useState('');
  const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false);
  const filteredItems = fakeUsers.filter(item => item.name && item.name.toLowerCase().includes(filterText.toLowerCase()));

  const subHeaderComponentMemo = React.useMemo(() => {
    const handleClear = () => {
      if (filterText) {
        setResetPaginationToggle(!resetPaginationToggle);
        setFilterText('');
      }
    };

    return <FilterComponent onFilter={e => setFilterText(e.target.value)} onClear={handleClear} filterText={filterText} />;
  }, [filterText, resetPaginationToggle]);

  return (
    <DataTable
      title="Contact List"
      columns={columns}
      data={filteredItems}
      pagination
      paginationResetDefaultPage={resetPaginationToggle} // optionally, a hook to reset pagination to page 1
      subHeader
      subHeaderComponent={subHeaderComponentMemo}
      selectableRows
      persistTableHead
    />
  );
};

storiesOf('Filtering', module)
  .add('Example 1', () => <BasicTable />)

从“React”导入React；
从“样式化组件”导入样式化；
从'@storybook/react'导入{storiesOf}；
从“冒牌货”进口冒牌货；
从“../shared/Button”导入按钮；
从“../../../src/index”导入数据表；
const createUser=（）=>({
id:faker.random.uuid（），
名称：faker.name.findName（），
电子邮件：faker.internet.email（），
地址：faker.address.streetAddress（），
bio:faker.lorem.句子（），
image:faker.image.avatar（），
});
const createUsers=（numUsers=5）=>
新数组（numUsers）.fill（未定义）.map（createUser）；
const fakeUsers=createUsers（2000）；
const TextField=styled.input`
高度：32px；
宽度：200px；
边界半径：3px；
边框左上半径：5px；
边框左下半径：5px；
边框右上角半径：0；
边框右下半径：0；
边框：1px实心#e5；
填充：0 32px 0 16px；
&：悬停{
光标：指针；
}
`;
const ClearButton=样式化（按钮）`
边框左上半径：0；
边框左下半径：0；
边框右上角半径：5px；
边框右下半径：5px；
高度：34px；
宽度：32px；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
`;
常量筛选器组件=（{filterText，onFilter，onClear}）=>(
X
);
常量列=[
{
姓名：'姓名'，
选择器：“名称”，
可排序：是的，
},
{
名称：'电子邮件'，
选择器：“电子邮件”，
可排序：是的，
},
{
姓名：'地址'，
选择器：'地址'，
可排序：是的，
},
];
常量基本表=（）=>{
常量[filterText，setFilterText]=React.useState（“”）；
const[ResetPaginationGogle，SetResetPaginationGogle]=React.useState（false）；
const filteredItems=fakeUsers.filter（item=>item.name&&item.name.toLowerCase（）.includes（filterText.toLowerCase（））；
const subHeaderComponentMemo=React.useMemo（（）=>{
常量handleClear=（）=>{
如果（过滤器文本）{
SetResetPaginationGogle（！ResetPaginationGogle）；
setFilterText（“”）；
}
};
返回setFilterText（e.target.value）}onClear={handleClear}filterText={filterText}/>；
}，[filterText，重置分页切换]；
返回(
);
};
storiesOf（'过滤'，模块）
.add（'示例1'，（）=>）

我的代码：

import React from 'react';
import NotesListHtml from './NoteListHtml'
import DataTable from 'react-data-table-component';


const FilterComponent = ( { filterText, onClear, onFilter }) => (
  <>
    <input id="search" type="text" placeholder="Filter By Name" aria-label="Search Input" value={filterText} onChange={onFilter} />
    <button type="button" onClick={onClear}>X</button>
  </>
)

const BasicTable = (props) => {
  let result = props.notes.map(function(el) {
    var o = Object.assign({}, el);
    o.fullName = `${props.data.first_name} ${props.data.last_name}`;
    return o;
  })
  

const ExpandableComponent = ({ data }) =>{
 return(<p style={{padding:'20px'}}>{data.contentBody}</p>)
}  
  const columns = [
    {
      name: 'Organization',
      selector: row => row.type[0].label || row.type,
      sortable: true,
      wrap:true
    },
    {
      name: 'Title',
      selector: 'title',
      sortable: true,
    },
      {
        name: 'Date',
        selector: row=>row.createdAt.split('T')[0],
        sortable: true,
      },
      {
        name: 'Author',
        selector: 'fullName',
        sortable: true,
      },
  ];

  const customStyles = {
    headCells: {
      style: {
          backgroundColor:'#f3f7f9',
      },
    },
    cells: {
      style: {
      color:'#79838b'
      },
    },
  };



  const [filterText, setFilterText] = React.useState('');
  const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false);
  const filteredItems = props.notes.filter(item => item.type[0].label && item.type[0].label.toLowerCase().includes(filterText.toLowerCase()))


  const subHeaderComponentMemo = React.useMemo(() => {
    console.log('subheader')
    const handleClear = () => {
      console.log('hit1')
      if (filterText) {
        setResetPaginationToggle(!resetPaginationToggle);
        setFilterText('');
      }
    }
    console.log('beforereturn');
    return (
    <>
    {/* <input id="search" type="text" placeholder="Filter By Name" aria-label="Search Input" value={filterText} onChange={onFilter} /> */}
    <button type="button" onClick={handleClear}>X</button>
    </>
    )

  }, [filterText, resetPaginationToggle])



  return (
    <>
    <DataTable
      subHeaderComponent={subHeaderComponentMemo}
      className='table'
      columns={columns}
      data={filteredItems}
      pagination={true}
      highlightOnHover={true}
      pointerOnHover={true}
      expandableRows={true}
      expandOnRowClicked={true}
      expandableRowsComponent={<ExpandableComponent data={result} />}
      paginationResetDefaultPage={resetPaginationToggle} // optionally, a hook to reset pagination to page 1
      customStyles={customStyles}
      subHeader={false}

    />
    </>

  );
}

export default BasicTable;

从“React”导入React；
从“./NoteListHtml”导入NotesListHtml
从“反应数据表组件”导入数据表；
常量过滤器组件=（{filterText，onClear，onFilter}）=>(
X
)
常量基本表=（道具）=>{
让结果=props.notes.map（函数（el）{
var o=Object.assign（{}，el）；
o、 全名=`${props.data.first_name}${props.data.last_name}`；
返回o；
})
const ExpandableComponent=（{data}）=>{
返回（
{data.contentBody}
）
}  
常量列=[
{
名称：'组织'，
选择器：row=>row.type[0]。标签| | row.type，
可排序：是的，
包装：对
},
{
姓名：'头衔'，
选择器：“标题”，
可排序：是的，
},
{
姓名：'日期'，
选择器：row=>row.createdAt.split（'T'）[0]，
可排序：是的，
},
{
姓名：'作者'，
选择器：“全名”，
可排序：是的，
},
];
常量自定义样式={
头细胞：{
风格：{
背景颜色：'#f3f7f9'，
},
},
单元格：{
风格：{
颜色：“#79838b”
},
},
};
常量[filterText，setFilterText]=React.useState（“”）；
const[ResetPaginationGogle，SetResetPaginationGogle]=React.useState（false）；
const filteredItems=props.notes.filter（item=>item.type[0]。label&&item.type[0]。label.toLowerCase（）.includes（filterText.toLowerCase（））
const subHeaderComponentMemo=React.useMemo（（）=>{
控制台日志（'subheader'）
常量handleClear=（）=>{
console.log（'hit1'）
如果（过滤器文本）{
SetResetPaginationGogle（！ResetPaginationGogle）；
setFilterText（“”）；
}
}
console.log（“返回前”）；
返回(
{/*  */}
X
)
}，[filterText，重置分页切换]）
返回(
);
}
可导出默认值；

---

你能详细解释一下“为什么它没有在我的前端渲染任何东西”的意思吗。您还可以包括数据的外观吗？也许把它放在沙箱里？