android - 为什么我在 react native 中的组件在组件状态发生变化后没有被重新渲染？

Question

我正在尝试获取动态评级并相应地渲染我的动态 svg 组件，但是在用户选择星号后状态发生变化后，该组件不会被重新渲染，

用户从组件中选择星号后，状态中的数据会发生变化，但即使状态发生变化，组件也不会重新渲染。

这是更改状态的控制台记录值。

这是存在逻辑的组件的代码

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';

import DirectionalShadow from './directionalShadow';

import Colors from '../res/colors';
import Images from '../res/images';
import SVGImages from '../res/images/dynamicSVG';

const RatingCard = props => {
  const [starData, setStarData] = useState([true, false, false, false, false]);

  const changeStar = data => {
    setStarData(data);
    console.log('Data logged');
    console.log(starData);
  };

  return (
    <View>
      <DirectionalShadow
        paddingBottom={1}
        shadowColor={Colors.textInputShadow}
        style={{
          borderRadius: 6,
          marginHorizontal: 16,
          marginTop: 10,
        }}>
        <View style={styles.cards}>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 13,
                marginLeft: 19,
                justifyContent: 'space-between',
              }}>
              <Text
                style={{
                  color: Colors.grayLight,
                  fontSize: 14,
                  fontFamily: 'Ubuntu-Regular',
                }}>
                {props.text}
              </Text>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                {starData.map((item, index) => (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.75}
                    onPress={() => {
                      var temp = starData;
                      for (var i = 0; i < starData.length; i++) {
                        if (i <= index) {
                          temp.splice(i, 1, true);
                        } else {
                          temp.splice(i, 1, false);
                        }
                      }
                      changeStar(temp);
                    }}
                    style={{marginHorizontal: 5}}>
                    {item ? (
                      <SVGImages.Star color={Colors.green} />
                    ) : (
                      <SVGImages.Star />
                    )}
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          </View>
        </View>
      </DirectionalShadow>
    </View>
  );
};

const styles = StyleSheet.create({
  cards: {
    height: 50,
    paddingRight: 20,
    borderRadius: 6,
    backgroundColor: Colors.textInputBackground,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,
    elevation: 8,
  },
});
export default RatingCard;

Answer 1

您需要创建数组的副本const temp = [...starData];，如果您只是操纵数组，钩子将不会识别出发生了变化。

import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';


const ToggleSquareArray = () => {
  const [squareData, setSquareData ] = useState([true, false, false, false, false]);

  const changeSquare = data => {
    setSquareData(data);
    console.log('Data logged');
    console.log(squareData);
  };

  return (
    <View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 13,
                marginLeft: 19,
                justifyContent: 'space-between',
              }}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                {squareData.map((item, index) => (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.75}
                    onPress={() => {
                      const temp = [...squareData]; // Create a copy of the array you wanna manipulate should do the trick
                      temp.splice(index, 1, !temp[index]);
                      console.log(temp);

                      changeSquare(temp);
                    }}
                    style={{marginHorizontal: 5}}>
                    {item ? (
                      <View style={{height: 50, width: 50, backgroundColor: '#ff0000'}} />
                    ) : (
                      <View style={{height: 50, width: 50, backgroundColor: '#ff00ff'}} />
                    )}
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          </View>
    </View>
  );
};

export default ToggleSquareArray;