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

Posted 2023-02-23

【中文标题】为啥组件在状态更改后不重新渲染。在 react-native 函数组件中

【英文标题】：why Component is not re-rendering after state change. in a react--native function Component为什么组件在状态更改后不重新渲染。在 react-native 函数组件中

【发布时间】：2020-08-28 01:50:17

【问题描述】：

这个问题我在制作一个功能组件的几天里一直面临着。我正在通过 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>
  );

请帮帮我，我会很慷慨的

【问题讨论】：

您是否在 console.log 中获得更新列表？

是的，我正在获取更新的列表

【参考方案1】：

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

你需要克隆和更新状态

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

        />

【讨论】：

我有同样的问题，我复制状态并在 new let 中分配，然后更新其中一个属性，然后设置 state(newObj) 但它不起作用！我的代码onChangeText=(newName) => const copyObj = editEmployeeSelected; copyObj.name = newName; console.log('copyObj', copyObj); setEditEmployeeSelected(copyObj);