Question

我有以下代码（完整示例）：

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, Button, StyleSheet, Animated } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';

const App = () => {

  const [blocks, setBlocks] = useState([]);

  const CreateBlockHandler = () => {
    let array = blocks;
    array.push({
      x: new Animated.Value(0),
      y: new Animated.Value(0)
    });
    setBlocks(array);
    RenderBlocks();
  };

  const MoveBlockHandler = (index, event) => {
    Animated.spring(blocks[index].x, { toValue: event.nativeEvent.x }).start();
    Animated.spring(blocks[index].y, { toValue: event.nativeEvent.y }).start();
  };

  const RenderBlocks = () => {
      return blocks.map((item, index) => {
        return (
          <PanGestureHandler key={index} onGestureEvent={event => MoveBlockHandler(index,event)}>
            <Animated.View style={[styles.block, {
              transform: [
                { translateX: item.x },
                { translateY: item.y }
              ]
            }]} />
          </PanGestureHandler>
        )
      });
  };


  return (

    <SafeAreaView style={styles.container}>
      <View style={styles.pancontainer}>
        <RenderBlocks />
      </View>
      <Button title="Add block" onPress={CreateBlockHandler} />
    </SafeAreaView>

  );

};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  pancontainer: {
    width: '95%',
    height:'75%',
    borderWidth: 1,
    borderColor: 'black'
  },
  block: {
    width: 50,
    height: 50,
    backgroundColor: 'black'
  }
});

export default App;

此代码有什么作用？这是一个大正方形，下面有一个按钮。当我单击按钮时，将在大方块中创建一个新的黑色方块（50x50）。我通过创建一个新的数组元素（array =块）来做到这一点。这是在功能 CreateBlockHandler 中完成的。这不能正常工作！

函数 MoveBlockHandler 使小方块可移动。可行！

什么不起作用？当我创建一个新的黑色正方形时，该黑色正方形不会显示在屏幕上。只有当我刷新时，正方形才会呈现。正方形是通过CreateBlockHandler创建的，因为当我在该函数中执行console.log（blocks）时，我可以看到添加了一个新的数组元素。

如何强制此代码对所有数组元素进行完全重新渲染？我尝试将正方形的渲染包装在单独的函数（ RenderBlocks ）中，每次创建新正方形时都会调用此函数（CreateBlockHandler中的最后一行）。该函数被调用（我可以通过console.log（）进行检查），但是没有渲染正方形。

Answer 1

当您将blocks分配给array时，将复制引用gete来改变状态，因此它不会在setState上重新呈现。

 const CreateBlockHandler = () => {
    let array = [...blocks];
    array.push({
      x: new Animated.Value(0),
      y: new Animated.Value(0)
    });
    setBlocks(array);
    RenderBlocks

Answer 2

您的代码存在多个问题。

正如kooskoos所指出的，您的状态在参照上保持相等（它是同一数组，只有元素会更改）。这不会触发重新渲染。

此外，您正在操纵App组件的状态。 RenderBlocks组件的属性和状态保持不变，这意味着它们不需要重新渲染。由于该组件是匿名函数，并且在App的每次渲染期间都会重新创建，因此无论如何它都可能会重新渲染。

此外，您正在直接调用RenderBlocks，它看起来像一个组件。那是不必要的，在这里什么也不做，但是如果它有任何钩子，则会引起问题。

您可能还应该遵循以下约定：组件将PascalCase大写，并将callbacksCase大写。

更新状态数组后，React Native不重新渲染

2 个答案: