不知道如何讓這個組件重新渲染

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 ，您唯一需要做的就是將所有數據記錄保存在不可更改的位置，並根據選擇過濾器，並設置為狀態。

例子