不知道如何让这个组件重新渲染

Question

小吃我在 React Native 中创建了一个条形图，它接受用户输入并相应地进行调整。 例如，如果用户输入小于 10，则仅显示小于用户输入值的条形组件。 如果用户输入大于 10，则显示用户输入的值大于 10。 这里的问题是组件实例没有重新渲染发布用户选择。 如果我一次选择少于 10 个，第二次我不能再次选择少于 20 个。 包含值 20 的条形组件不只是存在。 每次用户输入新值并选择新的小于/大于选择器选项时，有什么方法可以使此条形图重新呈现？

import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import {useState, useEffect, useCallback} from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions, SafeAreaView, Picker, Alert } from 'react-native';

export default function FocusScreen() {

const [filterLimit, setfilterLimit] = useState(100);
const [lessThanOrGreaterThan, setlessThanOrGreaterThan] = useState("greaterThan");
const [datas, setDatas] = useState([12, 19, 12, 25, 22, 10])

const dataset = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        data: datas,
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `blue`,
          (opacity = 1) => `yellow`,
          (opacity = 1) => `green`,
          (opacity = 1) => `purple`,
          (opacity = 1) => `orange`,
        ]
      }
    ]
  }

const applyFilter = () => {
    const isLessThan = lessThanOrGreaterThan === "greaterThan";
    const value = filterLimit;
    // update instance variable
    const newDatas = datas.map(v => {
    if (isLessThan ? v >= value : v <= value) return v;
        return 0;
    });
    setDatas(newDatas);
}

return (
      <SafeAreaView style={styles.chartContainer}>
      <BarChart
              data={dataset}
              width={300}
              height={220}
              withCustomBarColorFromData={true}
              flatColor={true}
              chartConfig={{
                backgroundColor: '#ffffff',
                backgroundGradientFrom: '#ffffff',
                backgroundGradientTo: '#ffffff',
                data: dataset.datasets,
                color: (opacity = 1) => '#fff',
                labelColor: () => '#6a6a6a',
              }}
            />
      <View>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          numeric
          placeholder="Filter Limit"
          value={filterLimit}
          onChangeText={text => setfilterLimit(text)}
        />
      </View>
    <View style={styles.pickerContainer}>
        <Picker
          selectedValue={lessThanOrGreaterThan}
          style={{ height: 50, width: 150 }}
          onValueChange={(itemValue, itemIndex) => setlessThanOrGreaterThan(itemValue)}
        >
          <Picker.Item label ="Greater Than" value="greaterThan" />
          <Picker.Item label="Less Than" value="lessThan" />
        </Picker>
      </View>
       <View style={styles.filterContainer}>
        <Button
          onPress={() => applyFilter()}
          title = "Apply Filter"
          color="#841584"
      />
      </View>
    </SafeAreaView>
);
} 

Answer 1

首先我觉得applyFilter里面的逻辑不对，为什么？ datas是过滤后的数据（首先是所有记录，但如果您应用过滤器，则datas将是过滤记录，因此下次使用过滤后的数据时，不是所有数据）不是所有数据记录，因此您必须保留所有记录，某处，你不能改变它，因为你必须从所有记录中过滤。

那么我们应该有一个函数在每次lessThanOrGreaterThan或filterLimit改变时被调用

useEffect(() => {
    applyFilter();
}, [lessThanOrGreaterThan, filterLimit]);

更新示例

如果您想在用户单击APPLY FILTER按钮时重新渲染图形，那么您不需要上面的useEffect ，您唯一需要做的就是将所有数据记录保存在不可更改的位置，并根据选择过滤器，并设置为状态。

例子