bugfix> javascript > 投稿

React Nativeを初めて使用し、1つのコンポーネントを開くとエラーメッセージが表示されます。これはナビゲーションを続けることを避けませんが、私はこれを一掃したいと思います。構文またはタイプミスであると確信していますが、どこから来たのかわかりません。

私のコンポーネントには、ボタンをクリックすると関数を呼び出すモーダルがあります。

コンポーネントのコードは次のとおりです。

import { connect } from "react-redux";
import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  TouchableOpacity,
} from "react-native";
import { Card, Button, Overlay } from "react-native-elements";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { PRIVATE_URL } from "../config";
function SettingsScreen({ setReduxUser, user }) {
  const [visible, setVisible] = useState(false);
  const toggleOverlay = () => {
    setVisible(!visible);
  };
  const handleLogOut = async () => {
    await fetch(`${PRIVATE_URL}/logout?token=${user.token}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };
  const handleDeleteUser = async () => {
    await fetch(`${PRIVATE_URL}/delete-user?id=${user.id}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };
  return (
    <View>
      <ScrollView>
        <Card containerStyle={{ borderRadius: 5, borderColor: "#abd6d3" }}>
          <View>
            <Button
              type="clear"
              titleStyle={{ color: "black" }}
              title="Déconnexion"
              onPress={() => handleLogOut()}
            />
          </View>
        </Card>
        
           <View
          style={{
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TouchableOpacity onPress={toggleOverlay}>
            <Text
              style={{
                color: "#eb4d4b",
              }}
            >
              Supprimer mon compte
            </Text>
          </TouchableOpacity>
          <Overlay
            isVisible={visible}
            onBackdropPress={toggleOverlay}
            overlayStyle={{
              borderRadius: 5,
              width: "94%",
              height: "25%",
              justifyContent: "space-between",
              borderWidth: 1,
              borderColor: "#418581",
            }}
          >
            <Text>
              Êtes-vous sur de vouloir supprimer votre compte ?
            </Text>
            <Button
              type="clear"
              titleStyle={{ color: "#418581" }}
              title="Non, je veux continuer à déjeuner"
              onPress={toggleOverlay}
            />
            <Button
              type="clear"
              titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
              title="Oui, j'ai pris ma décision"
              onPress={() => handleDeleteUser()}
            />
          </Overlay>
        </View>
      </ScrollView>
    </View>
  );
}
function mapDispatchToProps(dispatch) {
  return {
    setReduxUser: function (user) {
      dispatch({ type: "user", user });
    },
  };
}
function mapStateToProps(state) {
  return { user: state.user };
}
export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);

回答 1 件
  • 要素を内部でラップする必要があります <Overlay> コンテナに入れて、要素の配列ではなく、親要素を1つだけ持つようにします。

              <Overlay
                isVisible={visible}
                onBackdropPress={toggleOverlay}
                overlayStyle={{
                  borderRadius: 5,
                  width: "94%",
                  height: "25%",
                  justifyContent: "space-between",
                  borderWidth: 1,
                  borderColor: "#418581",
                }}
              >
               //WRAP CONTAINER HERE
                <Text>
                  Êtes-vous sur de vouloir supprimer votre compte ?
                </Text>
                <Button
                  type="clear"
                  titleStyle={{ color: "#418581" }}
                  title="Non, je veux continuer à déjeuner"
                  onPress={toggleOverlay}
                />
                <Button
                  type="clear"
                  titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
                  title="Oui, j'ai pris ma décision"
                  onPress={() => handleDeleteUser()}
                />
               //WRAP CONTAINER HERE
              </Overlay>
    
    

    あなたのコンテナは単に <View> ..。 </View>

あなたの答え