React表格筛选状态更新：如何遍历Profiles更新BiosafetyLevelId

我有一个以对象数组为数据的表格，目前已实现筛选功能，但需要更新正在筛选的profile项的状态。我在表格中展示筛选后的项，并通过下拉选择器选择项。**我需要遍历profiles数组，找到BiosafetyLevelId的值并更新profiles的状态。**请问该如何实现？

useEffect(() => {
  setError(false)
  setLoading(true)

  // Get Data
  $.ajax({
    method: 'GET',
    url: `${API_HOST}/api-bsl`
  })
    .done((data) => {
      const profiles = JSON.parse(data)
      console.log('profile', profiles)
      setProfiles(
        profiles.length > 0 ? profiles.sort((a, b) => a.name.localeCompare(b.name)) : []
      )
      const selectProfile = createSelectList(profiles, 'biosafetyLevelId', 'name')
      setArrayState(selectProfile)
      setLoading(false)
    })
    .fail(() => {
      setError(true)
      setLoading(false)
      setProfiles(null)
    })
}, [])

<div className='content column white-bg search'>
  <Select
        options={arrayState}
        onChange={(value) => setChangeState(value)}
        value={changeState}
        required
        inForm
        parentClass='form-group-column'
        label='Select Biosafety Level'
        addEmpty
        emptyLabel='Select Biosafety Level'
        id='user_type'
        error={error && profiles === ''}
      />
</div>

<table className='fixed-header lab-profile-menu-sub-row'>
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {profiles !== null &&
      profiles.length > 0 &&
      profiles.map((profile) => (
        <tr key={profile.uuid}>
          <td>{profile.name}</td>
          <td>
            <Button
              onClick={() => toggleBioProfileModal(profile, true)}
              className='add-edit-button'
            >
              Edit
            </Button>
          </td>
        </tr>
      ))}
  </tbody>
</table>

要实现根据选中的BiosafetyLevelId筛选并更新表格展示的内容，你可以按以下步骤修改代码：

• 新增筛选结果状态：单独维护一个存储筛选后数据的状态，避免修改原数据影响后续重新筛选
• 监听选择变化：当下拉选择器的值改变时，遍历原数组匹配对应ID，更新筛选结果
• 渲染筛选后的数据：表格部分替换为渲染筛选后的结果

具体代码修改 #

1. 新增筛选结果状态

const [filteredProfiles, setFilteredProfiles] = useState([]);

2. 初始化数据时同步设置筛选结果

useEffect(() => {
  setError(false)
  setLoading(true)

  $.ajax({
    method: 'GET',
    url: `${API_HOST}/api-bsl`
  })
    .done((data) => {
      const profiles = JSON.parse(data)
      const sortedProfiles = profiles.length > 0 ? profiles.sort((a, b) => a.name.localeCompare(b.name)) : []
      setProfiles(sortedProfiles);
      // 初始化筛选结果为全部数据
      setFilteredProfiles(sortedProfiles);
      const selectProfile = createSelectList(profiles, 'biosafetyLevelId', 'name')
      setArrayState(selectProfile)
      setLoading(false)
    })
    .fail(() => {
      setError(true)
      setLoading(false)
      setProfiles(null)
      setFilteredProfiles([]);
    })
}, [])

3. 添加筛选逻辑的监听

useEffect(() => {
  if (!profiles) return;
  
  // 选择空选项时显示全部数据
  if (!changeState) {
    setFilteredProfiles(profiles);
    return;
  }
  
  // 遍历数组，匹配biosafetyLevelId
  const matchedProfiles = profiles.filter(profile => profile.biosafetyLevelId === changeState);
  setFilteredProfiles(matchedProfiles);
}, [changeState, profiles]);

4. 修改表格渲染部分

<table className='fixed-header lab-profile-menu-sub-row'>
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {filteredProfiles.length > 0 ? (
      filteredProfiles.map((profile) => (
        <tr key={profile.uuid}>
          <td>{profile.name}</td>
          <td>
            <Button
              onClick={() => toggleBioProfileModal(profile, true)}
              className='add-edit-button'
            >
              Edit
            </Button>
          </td>
        </tr>
      ))
    ) : (
      <tr>
        <td colSpan="2">暂无匹配的数据</td>
      </tr>
    )}
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者kjamp