如何阻止Array不斷地重新渲染 -有解無憂

我有一個影像陣列，當我在react中點擊一個按鈕并選擇一個影像時，我正在更新每個值。然而，當我只想讓它在我挑選圖片時重新渲染時，這個陣列卻不斷地重新渲染。以下是我的代碼：

const [fileArray, setFileArray] = useState<string[]> ([''/span>, ''/span>, ''/span>, '', '', ''] ）。)

 function replaceFileState(file: string, index: number) {
  let f = [...fileArray] 。
    f[index] = file;
    setFileArray（f）。
  }

return (
  <View>/span>
    {permissionStatus ?
        <Modal style={styles. bottomModalView} isVisible={modalVisible} backdropOpacity={0}
               onBackdropPress={() => setModalVisible(false)}>
          <View style={styles.modal}> 
            <TouchableOpacity>/span>
              <Text style={{}。
                borderBottomWidth: 1,
                borderBottomColor: '#FFF'。
                color: '#FFF',
                textDecorationLine: 'underline',
                alignSelf: 'flex end',
                justifyContent: 'center',
                paddingTop: 40 '.
              }}>所有照片</text>
            </TouchableOpacity>/span>
            < ScrollView horizontal={true} scrollEnabled={true}
                        contentContainerStyle={{justifyContent:  'center', alignItems: 'center' }}>
              {files.map((file, index) => {
                回傳 (
                    <TouchableWithoutFeedback onPress={（） => replaceFileState（file, index）}>
                      <Image。
                          key={file}。
                          style={{width: 100, height: 100, marginLeft:  10, marginRight: 10, borderRadius: 4}}.
                          source={{uri:/span> file}}。
                      />
                    </TouchableWithoutFeedback> 
                );
              })}
            </ScrollView> ); })。
            <Text style={{fontSize:  22, color:/span> '#FFF', marginLeft:  20, marginBottom: 20}}>你的照片</text>
          </查看>/span>
        </Modal> :
        <View/> : <View>
    }
    <Text>Upload your photos</Text>
    {fileArray.map((image) => {
      回傳 (
           image ==='' ?
              < OnboardingPhoto setStatus={setPermissions} setModal={setIsModalVisible}/> 
              :  <Image
                  key={image}。
                  style={{width: 100, height:  100, marginLeft: 10, borderRadius: 100}}。
                  source={{uri:/span> image}}。
              />
      )
    })}
  </View>>

);

這是一個擁有所有用戶最新圖片的模式，當點擊每張圖片時，它將用螢屏上的用戶圖片替換空的占位符圖片。然而，它不斷地重新提交。我想把它放在useEffect中，但我不知道在哪里!

uj5u.com熱心網友回復：

我認為你需要在TouchableWithoutFeedback組件上定義一個key屬性。

請看這里的指南。https://reactjs.org/docs/lists-and-keys.html

uj5u.com熱心網友回復：

鉤子是在函陣列件中使用的，這也許是其中一個原因。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/307912.html

標籤：

上一篇：保護用.Net4.7撰寫的WPF應用程式的代碼

下一篇：反應不呈現最新值