如何使用 Mobx 设置数据平面列表？ [复制]

Posted 2023-02-16

【中文标题】如何使用 Mobx 设置数据平面列表？ [复制]

【英文标题】：How to set data flatlist with Mobx? [duplicate]

【发布时间】：2022-01-02 04:57:33

【问题描述】：

我是 mobx 的新手。我正在尝试使用 mobx 从 favorites store 将数据传输到 FlatList 到 favoritescreen 端，但是 flatlist 显示为空，为什么？

我在bookmarkList中使用listData()的原因是如果我没有在bookmarkList中使用箭头函数，就会出现如下错误；

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this2.userId')]

收藏夹（商店）；

import  observable, computed, action, makeObservable, configure  from "mobx";
import  bookmarkApi, petApi  from '../../constants/apiURL';
import AsyncStorage from '@react-native-async-storage/async-storage';

configure(
    enforceActions: "never",
)

class Favorites 
    userId = 0;
    petList = [];

    constructor() 
        this.bookMarkList()

        makeObservable(this, 
            userId: observable,
            petList: observable,
            bookMarkList: action,
        )
    

    bookMarkList = async () => 
        const value = await AsyncStorage.getItem('userId')
        if (value != null) 

            this.userId = value;

            listData = () => 
                bookmarkApi.get('/').then(function (responseJson) 
                    if (responseJson) 
                        this.petList = responseJson.data.filter(data => data.userId == this.userId)
                    
                )
            
        
    


export const favoriteStore = new Favorites();

FavoriteScreen.js

import  observer  from 'mobx-react';
import  favoriteStore  from '../store/favorites';

function FavoriteScreen() 

    const userId, petList = favoriteStore;

    const Item = ( petName ) => (
        <View style=styles.item>
            <Text style=styles.title>petName</Text>
        </View>
    );


    const renderItem = ( item ) => (
        <Item petName=item.petName />
    );

    return (
        <SafeAreaView style=styles.container>
            <FlatList
                data=petList
                keyExtractor=item => item.bookmarkId
                renderItem=renderItem
            />
        </SafeAreaView>
    )

export default observer(FavoriteScreen);

【问题讨论】：

你昨天刚问了同样的问题，不是吗？ ***.com/questions/70074073/…

其实不是。它没有出现错误，但在 flatlist 中仍然没有数据 :) @Danila

好的。现在在您的示例中，您的代码基本上什么都不做。您将一些箭头功能分配给listData，就是这样。你永远不会调用它。这是故意的吗？

是的，因为我不能调用 listdata 函数。因为该函数在 bookMarkList 中。我编写 listData 函数的原因是我需要使用箭头函数，如您在上一个主题中给出的答案。 @丹妮拉

我的请求是将数据从 listData 分配给 FlatList 但不知何故我不能@Danila

【参考方案1】：

我解决了

代替：

listData = () => 
            bookmarkApi.get('/').then(function (responseJson) 
                if (responseJson) 
                    this.petList = responseJson.data.filter(data => data.userId == this.userId)
                
            )
        

像这样：

  bookmarkApi.get('/').then(bookmarks => 
        this.petList = bookmarks.data.filter(data => data.userId == this.userId)
    )

【讨论】：

我的意思是，你刚刚使用了我的解决方案，不是吗？ ***.com/questions/70074073/…我会将此问题标记为重复

我就是这样用的

bookmarkApi.get('/').then(bookmarks => this.petList = bookmarks.data.filter(data => data.userId == this.userId) )

我认为它的解决方案:)