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)

        }}/>

为什么组件在状态更改后没有重新渲染。在本机函数组件中

1 个答案: