javascript - 为什么我的 flatlist 在过滤时不会再次呈现我的组件？

问题描述

我有一个平面列表，顶部有一个搜索组件：

<>
  <SearchBar
    placeholder="Pesquise por nome, idade ou saldo"
    lightTheme
    round
    autoCapitalize="none"
    onChangeText={text => searchFilterFunction(text)}
    autoCorrect={false}
    value={term}
    containerStyle={{ backgroundColor: 'transparent' }}
    style={{ borderWidth: 0 }}
  />
  <FlatList
    data={lotsResult}
    keyExtractor={lot => lot.id.toString()}
    renderItem={({ item: lot }) => {
      const collectDate = new Date(lot.collectDateInMili);
      const age = differenceInDays(new Date(), collectDate) + 1;
      return (
        <Appointment
          id={lot.id}
          originUserId={lot.originUserId}
          aviaries={lot.aviaries}
          name={lot.name}
          balance={lot.balance}
          late={lot.late}
          age={age}
          collectDateInMili={lot.collectDateInMili}
          batchDateInMili={lot.collectDateInMili}
        />
      );
    }}
  />
</>

当用户在搜索框中键入时，此平面列表调用函数searchFilterFunction：

function searchFilterFunction(text: string) {
  setTerm(text);
  const textData = text.toLowerCase();
  const newData = lots.data.filter(item => {
    const collectDate = new Date(item.collectDateInMili);
    const age = differenceInDays(new Date(), collectDate) + 1;
    const itemData = `${item.name.toLowerCase()} ${item.balance
      .toString()
      .toLowerCase()} ${age.toString().toLowerCase()}`;
    return itemData.indexOf(textData) > -1;
  });
  console.log('searchFilterFunction -> textData', textData);
  console.log('searchFilterFunction -> newData', newData);
  SetLotsResult(newData);
}

用于搜索此函数数据的批次状态是我的组件的原始且不可变的状态。我将结果传递给lotResult并将其呈现在flatlist中。但是，当搜索一个术语时：28798我创建了一个 console.log 并且我的函数返回了值数组，但它没有呈现在平面列表中。

返回的 Console.log：

{
  "message": "searchFilterFunction -> newData",
  "args": [
    [
      {
        "id": 3,
        "originUserId": 1,
        "name": "28798-GENIVAL ALVES 01 (G-1,2)",
        "balance": 2375,
        "aviaries": [
          {
            "id": 2,
            "batchId": 1,
            "name": "AV02",
            "capacity": 45000
          },
          {
            "id": 3,
            "batchId": 1,
            "name": "AV03",
            "capacity": 1500
          }
        ],
        "late": true,
        "batchDateInMili": 1596596400000,
        "collectDateInMili": 1596596400000
      },
      {
        "id": 2,
        "originUserId": 1,
        "name": "28798-GENIVAL TERTO ALVES 01 (G-1,2)",
        "balance": 65000,
        "aviaries": [
          {
            "id": 1,
            "batchId": 1,
            "name": "AV01",
            "capacity": 65000
          }
        ],
        "late": true,
        "batchDateInMili": 1596769200000,
        "collectDateInMili": 1596769200000
      }
    ]
  ]
}

标签： javascriptfilterreact-hooksreact-native-flatlist

javascript - 为什么我的 flatlist 在过滤时不会再次呈现我的组件？

问题描述

解决方案

推荐阅读