为什么组件在状态更改后不重新渲染。在 react-native 函数组件中

Question

这个问题我在制作一个功能组件的几天里一直面临着。我正在通过 onPress 方法更改状态，控制台为我提供了我想要的相同数据，但它没有使用更新的数据重新渲染。 这是小吃link

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>
  );
}

请帮帮我，我会很慷慨的

Answer 1

您的状态更新不会导致重新渲染的原因是因为您在更新时改变了状态，并且反应不认为状态已更改，因为引用尚未更新

你需要克隆和更新状态

  rightAvatar={<Icon color="red" raised name="delete" onPress={async () => {
          await console.log(l)
          const newList = [...list];
          newList.splice(i,1);
          setList(newList)

        }}/>