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

【问题标题】：Why doesn't my flatlist render my components again when filtering?为什么我的 flatlist 在过滤时不会再次呈现我的组件？
【发布时间】：2020-09-21 13:32:26
【问题描述】：

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

<>
  <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，我的函数返回了值数组，但它没有呈现在平面列表中。

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

【问题讨论】：

请向我们展示您的状态声明和此函数：`SetLotsResult(newData);`
const [lotsResult, setLotsResult] = useState([])

标签： javascript filter react-hooks react-native-flatlist

【解决方案1】：

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

注意大小写的差异。它们应该匹配。

【讨论】：

令人惊讶的是，在我的代码中，该函数的首字母大写相同。所以错误不存在。
@Splinter 这是发布问题的最小可重现示例的一个非常好的案例。我应该首先建议。 stackoverflow.com/help/minimal-reproducible-example

【解决方案2】：

我验证了当提供给 Flatlist 的数据发生变化时，我的组件的特征不是没有固定高度。我通过定义最小高度解决了这个问题。

【讨论】：