为什么Component在状态改变后没有重新渲染？在一个react--native函数中Component

Question

这个问题我已经面临了好几天了，我正在做一个函数组件。我正在通过onPress方法改变状态，控制台给了我同样的数据，我想，但它没有重新渲染与更新的数据。联系

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

你的状态更新不会导致重新渲染的原因是你在更新时突变了状态，而response不认为状态已经改变，因为引用没有更新。

你需要克隆和更新状态

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

        }}/>