为什么 state 更改后组件没有重新渲染。 在 react-native function 组件中

Question

我在制作 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>
  );
}

请帮帮我，我会很慷慨的

Answer 1

您的 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)

        }}/>