[英]why Component is not re-rendering after state change. in a react--native function Component
我在制作 function 組件時一直面臨這個問題。 我正在通過 onPress 方法更改 state,控制台給了我想要的相同數據,但它沒有使用更新的數據重新渲染。 這是小吃鏈接
https://snack.expo.io/@dharmendrasha/scroll-view-search-here
這是一個示例代碼
import React, { Componenet, useState } from 'react';
import { Text, View, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { ListItem, SearchBar, Icon } from 'react-native-elements';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import TouchableScale from 'react-native-touchable-scale';
import _ from 'lodash'
export default function App() {
const [search, setSearch] = useState('');
const updateSearch = search => {
setSearch(search);
};
const [list, setList] = useState([{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},]);
return (
<SafeAreaView>
<View>
<SearchBar
placeholder="Type Here..."
onChangeText={(text) => {
setSearch(text)
console.log(search)
}}
value={search}
/>
<ScrollView>
{list.map((l, i) => (
<ListItem
Component={TouchableScale}
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
subtitle={l.subtitle}
bottomDivider
rightAvatar={<Icon color="red" raised name="delete" onPress={async () => {
await console.log(l)
list.splice(i,1);
setList(list)
console.log(list)
}}/>}
/>
))}
</ScrollView>
</View>
</SafeAreaView>
);
}
請幫幫我,我會很慷慨的
您的 state 更新不會導致重新渲染的原因是因為您在更新和反應時正在變異 state 並不認為 state 已更改,因為更新的參考已更改
您需要克隆和更新 state
rightAvatar={<Icon color="red" raised name="delete" onPress={async () => {
await console.log(l)
const newList = [...list];
newList.splice(i,1);
setList(newList)
}}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.