为什么我的平面列表在过滤时不再次渲染我的组件？

Question

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

<>
  <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);
}

用于搜索此功能数据的lots状态是我的组件的原始和不可变状态。我将结果传递给 lotsResult 并将其呈现在 flatlist 中。然而，当搜索一个术语时：28798 我做了一个 console.log 和我的函数 returns 值数组，但它没有在 flatlist 中呈现。

Console.log 共 return：

{
  "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
      }
    ]
  ]
}

Answer 1

在我看来，您没有正确调用设置状态挂钩。它被定义（根据您的评论）为 setLotsResult。但是，在您的代码中，您似乎正在调用 SetLotsResult(newData).

请注意大小写差异。他们应该匹配。

Answer 2

我验证了当提供给 Flatlist 的数据发生变化时，我的组件没有固定高度的特点。我通过定义 min-height.

解决了这个问题

为什么我的平面列表在过滤时不再次渲染我的组件？

Why doesn't my flatlist render my components again when filtering?

javascript

filter

react-native-flatlist

react-hooks