我有一种不可动摇的感觉,我正在做一些愚蠢的错误!
我正在开发一个电子商务应用程序,遇到了嵌套<FlatList />
的问题
状态更改后屏幕没有呈现,有人能告诉我我做错了什么吗?
import {useState} from 'react';
import {FlatList} from 'react-native';
import {IconButton, PaperProvider, Text} from 'react-native-paper';
const data = [
[
{id: '0', value: 'size-s'},
{id: '1', value: 'size-m'},
{id: '2', value: 'size-l'},
],
[
{id: '0', value: 'ab-testing'},
{id: '1', value: 'access-point'},
{id: '2', value: 'account'},
],
];
export default () => {
const [variant, variantSet] = useState([
{id: '0', value: 'size-s'},
{id: '2', value: 'account'},
]);
console.log(variant);
return (
<PaperProvider>
<Text>Working</Text>
{data.map((current, i) => (
<FlatList
horizontal
contentContainerStyle={{flex: 1, justifyContent: 'center'}}
legacyImplementation={false}
key={i}
data={current}
renderItem={({item}) => (
<IconButton
icon={item.value}
style={{
backgroundColor: variant[i]?.id === item.id ? 'red' : null,
}}
onPress={() => {
console.log('Pressed', variant);
let newVariant = variant;
newVariant[i] = item;
variantSet(newVariant);
}}
/>
)}
/>
))}
</PaperProvider>
);
};
1条答案
按热度按时间6ojccjat1#
你实际上是在直接改变状态,这可能会导致React中的意外行为。React依赖于不可变的状态更新来触发重新渲染。要解决此问题,您应该在进行更改之前创建状态的副本,然后使用该副本更新状态
这样