使用 extraData 在功能组件中重新渲染平面列表时遇到问题

Question

I'm struggling to re-render a flatlist. I'm trying to use a boolean refreshToggle , that is fed into extraData , that is changed after the desired information is successfully fetched. The code below successfully fetches the data and changes the boolean (so changing to functional updates for the state, while perhaps better practice, doesn't seem like a solution) (I've checked that this is happening with various logs etc), but the flatlist doesn't re-render.

export default function transactions({ navigation }: { navigation: any }) {
    const [paymentsBtnActive, setPaymentsBtnActive] = React.useState<boolean>(navigation.getParam('Pressed') == 'Payments');
    const [requestsBtnActive, setRequestsBtnActive] = React.useState<boolean>(navigation.getParam('Pressed') == 'Requests');
    const [refreshToggle, setRefreshToggle] = React.useState<boolean>(false);

    let data: any[] = [];

    async function getRequests() {
        const body = { 
            'phone': GLOBAL.userInfo['phone']
        }
        const options = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            body: JSON.stringify(body)
        }
        let requests =  await fetch('http://3ef68e9c1352.ngrok.io/requests/user', options);
        let requestsJSON = await requests.json();
        data = requestsJSON['data'];
    }    

    function renderItem(item: any) {
        return (<Text>{item['item']['data']['date']}</Text>)
    }
    
    function listEmpty(){
        return (<Text>Loading</Text>)
    }

    useEffect(() => {
        (async function () {
            await getRequests();
            setRefreshToggle(!refreshToggle)
        })()
    }, [])

    return (
        <SafeAreaView style = {styles.container}>
            <View style = {{flexDirection: 'row', justifyContent: 'center'}}>
                <TouchableOpacity style = { paymentsBtnActive ? styles.paymentsBtnActive : styles.paymentsBtnInactive } onPress = { () => { setRequestsBtnActive(paymentsBtnActive) 
                    setPaymentsBtnActive(!paymentsBtnActive) } } >
                    <Text style = { paymentsBtnActive ? styles.whiteText : styles.redText }>Payments</Text>
                </TouchableOpacity>
                <TouchableOpacity style = { requestsBtnActive ? styles.requestsBtnActive : styles.requestsBtnInactive } onPress = { () => { setPaymentsBtnActive(requestsBtnActive)
                    setRequestsBtnActive(!requestsBtnActive) } }  >
                    <Text style = { requestsBtnActive ? styles.whiteText : styles.redText }>Requests</Text>
                </TouchableOpacity>
            </View>


            <View style = {styles.summaryView}>
                <FlatList 
                    data={data} 
                    renderItem={renderItem} 
                    ListEmptyComponent = {listEmpty}
                    extraData = {refreshToggle}
                />
            </View>
        </SafeAreaView>
    );
    

Answer 1

You should have this instead

let [data, setData] = useState<any[]>([]);

const getRequests = useCallback(async function() {
   const body = {'phone': GLOBAL.userInfo['phone']}
   
   const options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json'},
      body: JSON.stringify(body)
   }

   let requests =  await fetch('http://3ef68e9c1352.ngrok.io/requests/user', 
   options);

   let requestsJSON = await requests.json();

   return requestsJSON['data']
}, []);

useEffect(() => {
  (async function () {
     const data = await getRequests();
     setData(data)
   })()
}, [])


<FlatList 
   data={data}
   renderItem={renderItem}
   ListEmptyComponent = {listEmpty}
/>

Answer 2

I ended up doing this:

export default function transactions({ navigation }: { navigation: any }) {
    const [paymentsBtnActive, setPaymentsBtnActive] = React.useState<boolean>(navigation.getParam('Pressed') == 'Payments');
    const [requestsBtnActive, setRequestsBtnActive] = React.useState<boolean>(navigation.getParam('Pressed') == 'Requests');
    const [data, setData] = React.useState<Array<any>>([]);

    async function getRequests() {
        const body = { 
            'phone': GLOBAL.userInfo['phone']
        }
        const options = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            body: JSON.stringify(body)
        }
        let requests =  await fetch('http://3ef68e9c1976.ngrok.io/requests/user', options);
        let requestsJSON = await requests.json();
        setData(JSON.parse(JSON.stringify(requestsJSON['data'])))
    }    

    function renderItem(item: any) {
        console.log(item)
        return (<Text>{item['item']['data']['date']}</Text>)
    }
    
    function listEmpty(){
        return (<Text>Loading</Text>)
    }

    useEffect(() => {
        (async function () {
            await getRequests();
        })()
    }, [])

    return (
        <SafeAreaView style = {styles.container}>
            <View style = {{flexDirection: 'row', justifyContent: 'center'}}>
                <TouchableOpacity style = { paymentsBtnActive ? styles.paymentsBtnActive : styles.paymentsBtnInactive } onPress = { () => { setRequestsBtnActive(paymentsBtnActive) 
                    setPaymentsBtnActive(!paymentsBtnActive) } } >
                    <Text style = { paymentsBtnActive ? styles.whiteText : styles.redText }>Payments</Text>
                </TouchableOpacity>
                <TouchableOpacity style = { requestsBtnActive ? styles.requestsBtnActive : styles.requestsBtnInactive } onPress = { () => { setPaymentsBtnActive(requestsBtnActive)
                    setRequestsBtnActive(!requestsBtnActive) } }  >
                    <Text style = { requestsBtnActive ? styles.whiteText : styles.redText }>Requests</Text>
                </TouchableOpacity>
            </View>


            <View style = {styles.summaryView}>
                <FlatList 
                    data={data} 
                    renderItem={renderItem} 
                    ListEmptyComponent = {listEmpty}
                />
            </View>
        </SafeAreaView>
    );

This way when getRequests is called a new array with a difference reference is assigned to data so the Flatlist is re-rendered.

Because the all of the data was changing, this was not a scenario in which using extraData was necessary, nor the kind of scenario for which extraData was designed. Nonetheless, my initial approach was inspired by this , and I am still not sure why it didn't work.