尝试在 React Native 中更改我的不可变数组

Question

我有一个函数运行每次您的位置发生变化时，我都会尝试在发现某个 if 语句为真时在我的数组中设置一个值。我所做的似乎只是从我的变量中删除除了我正在更改的值之外的所有内容。不好的解释所以这里是一些代码...

数据是这样开头的：

this.state = { selectedItem: [] }

并且在正常的应用程序使用过程中会变成这样：

selectedItem: [{address: 'Somewhere', latitude: -37.826835, longitude: 144.992030, found: false }]

这是我尝试更改数据的地方（添加一些数据后，这将始终运行）：

const newSelectedItem = () => {
    let copyB = {...this.state.selectedItem};
    copyB.found = true;
    return copyB;
};
this.setState({selectedItem: newSelectedItem});

当我尝试运行:

{this.state.selectedItem.address}

我看到初始值是地址 "Somewhere" 但是当我的函数运行s 基于位置变化时它消失了。我在上面的函数中对我的数据做了什么？我刚刚做到了 selectedItem: [{found:true}] 还是类似的蠢事？

Answer 1

除了一件事，你在这个函数中做得很好：

const newSelectedItem = () => {
    let copyB = {...this.state.selectedItem};
    copyB.found = true;
    return copyB;
};
this.setState({selectedItem: newSelectedItem});

这里的 copyB 现在是一个对象，但是您选择的 Item 是一个数组。所以现在的问题是，当您使用 newSelctedItem 执行 setState 时，selectedItem 现在是一个对象。

SO copyB.found = true; 不会评估任何东西，请尝试 copyB[0].found = true; 这样可以访问该值，因此 return 为真。

并且当您尝试访问状态时，替换 {this.state.selectedItem.address} {this.state.selectedItem[0].address} ,

希望对您有所帮助。如有任何疑问，请随时提出。

你可以玩玩这支笔codepen

Answer 2

好吧，这很奇怪，因为您仍然得到初始值。您的代码中存在一些问题：

您想将变量存储在数组中：没问题，但问题出在您检索和设置值的方式上。由于 selectedItem，你的 {this.state.selectedItem.address} 因为这是一个对象解构。为此，您必须先销毁数组，例如：item = selectedItem[0] 或使用 map 等...之后，您可以尝试：item.address.

另一个问题来自您的newSelectedItem。因为 let copyB = {...this.state.selectedItem}; 会破坏你的 selectedItem，获取它的所有属性并设置为 newSelectedItem，它会让你的 selectedItem 变成一个对象，不再是数组。
如果您的 selectedItem 只存储 1 个对象，那么不要使用数组。这 selectedItem 将变为：

selectedItem: {
    address: 'Somewhere',
    latitude: -37.826835,
    longitude: 144.992030,
    found: false
}

它看起来像一个 JSON 对象，因此您可以这样做：selectedItem.address

如果您仍然不明白，请进行一些调试或 console.log("selectedItem", this.state.selectedItem) 看看发生了什么，您会发现的。

Answer 3

我想最后我是将函数映射到数据而不是数据本身。这是我最终的解决方案...

const newMyWaypoinys = this.state.myWaypoints.map(a => {
    let copyA = {...a};
    if (copyA.address === wp.address) {
        if (copyA.address === this.state.selectedItem.address) {
            this.setState(prevState => ({
                selectedItem: {         
                    ...prevState.selectedItem,    
                    found: true  
                }
            }))
        }
    copyA.found = true;
    }
    return copyA;
});
this.setState({
    myWaypoints: newMyWaypoinys,
});

尝试在 React Native 中更改我的不可变数组

Trying to change my immutable array in React Native

immutability

react-native