时间戳

首页 > 解决方案 > 样式没有更新

javascript - 样式没有更新

问题描述

大家好，我想要当我点击心脏填充并变成红色或者它是空的并且是黑色的时，我无法达到这个结果，当我点击它时，心脏的颜色和形状都没有改变。你能帮助我吗？

function Discussion(props) {
  const [heartTouched, setHeartTouched] = useState(new Array(DATA.length));

  const NewArray = (id, value) => {
    let array = heartTouched;
    array[id] = value;
    setHeartTouched(array);
    console.log(heartTouched);
  };

  return (
    <FlatList
      style={{ backgroundColor: "#F3D26F" }}
      data={DATA}
      extraData={DATA}
      keyExtractor={({ id }) => id.toString()}
      renderItem={({ item, index }) => (
        <Screen style={styles.container}>
          <View style={styles.commentContainer}>
            <View style={styles.textCommentContainer}>
              <Text>{item.user}</Text>
              <Text style={styles.comment}>Hello</Text>
            </View>
            <TouchableOpacity
              style={styles.heartContainer}
              onPress={
                index === item.id - 1
                  ? heartTouched[index]
                    ? () => NewArray(index, false) + (item.like -= 1)
                    : () => NewArray(index, true) + (item.like += 1)
                  : null
              }
            >
              <MaterialCommunityIcons
                style={styles.heartStyle}
                name={heartTouched[index] ? "heart" : "heart-outline"}
                color={heartTouched[index] ? "red" : "black"}
                size={24}
              />
            </TouchableOpacity>
          </View>
        </Screen>
      )}
    />
  );
}

标签： javascriptreactjsreact-native

解决方案

问题主要来自于线路

   let array = heartTouched;

当您需要更改 react 中的状态时，您必须以不可变的方式进行，这意味着您不能获取数组并更改一个元素，您必须重新创建一个新元素，然后再更改新元素。

  let array = [...heartTouched];

React 仅在重新创建状态（如果它是数组或对象）时触发重新渲染，因为它查看的是引用而不是对象，并且当您更改一个元素时，您不会更改引用。

这样您就可以从状态创建一个新数组，希望这对您有用。

推荐阅读