使處于反應本機狀態的道具意識到

我在 ReactNative 中有一個組件，其屬性我想要一個狀態，但是我該如何實作呢？

import React, { useState } from "react";
import {
  Alert,
  Text,
  TouchableHighlight,
  ScrollView,
  View,
} from "react-native";

const MyComponent = (props) => {
  const [modalVisible, setModalVisible] = useState(true);

  const _closeModal = () => {
    setModalVisible(false);
  };

  const toggleUser = async (user) => {
    Alert.alert(
      "Toggle",
      "You sure?",
      [
        {
          text: "Yes",
          onPress: () => {
            user.active = false;
          },
          style: "cancel",
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "default",
        },
      ],
      { cancelable: false }
    );
  };
    
   const activeUsers = (users) => {
     return users.filter((item) => item.active);
   };
     

  return (
    <View>
      <ScrollView>
        {activeUsers(props.users).map((u) =>
          u.active == true ? (
            <View>
              <Text>
                {u.name}
                {u.active ? " - active" : null}
              </Text>
              <TouchableHighlight
                onPress={() => {
                  toggleUser(u);
                }}
              ></TouchableHighlight>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
};

export default MyComponent;

在 App.js 中使用它：

<MyComponent users={this.state.users} ></MyComponent>

我正在尋找讓用戶串列僅顯示活動用戶的可能性。如果它處于活動狀態，則將切換按鈕設定為活動狀態為 false。

現在它不起作用。這是因為它沒有狀態嗎？如果是這樣，如何使這種狀態意識到？

當然，代碼的作用不止于此，但這是我無法弄清楚的一小部分。

uj5u.com熱心網友回復：

您必須為 activeUsers 使用這樣的狀態；

import React, { useState, useEffect } from "react"; // this line changed
import {
  Alert,
  Text,
  TouchableHighlight,
  ScrollView,
  View,
} from "react-native";

const MyComponent = (props) => {
  const [modalVisible, setModalVisible] = useState(true);
  const [activeUsers, setActiveUsers] = useState([]);
  

  // add this (I forget). dont forget to import!!

  useEffect(() => {
    getActiveUsers();
  }, []);

  const _closeModal = () => {
    setModalVisible(false);
  };

  const toggleUser = async (user) => {
    Alert.alert(
      "Toggle",
      "You sure?",
      [
        {
          text: "Yes",
          onPress: () => {
            const active = activeUsers;
            const filtered = active.filter(item => item.id !== user.id);
            user.active = false;
            filtered.push(user);
            setActiveUsers([...new Set(filtered)]);
          },
          style: "cancel",
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "default",
        },
      ],
      { cancelable: false }
    );
  };
    /**
     * change this function name
     */
   const getActiveUsers = () => {
     const active = props.users.filter((item) => item.active);
     setActiveUsers(active);
   };
     

  return (
    <View>
      <ScrollView>
        {activeUsers.map((u) =>
          u.active == true ? (
            <View>
              <Text>
                {u.name}
                {u.active ? " - active" : null}
              </Text>
              <TouchableHighlight
                onPress={() => {
                  toggleUser(u);
                }}
              ></TouchableHighlight>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
};

*** 如果你提取一個組件廣告 ListItem 并將用戶作為狀態傳遞給它，這個程序就簡單多了。

標籤：反应 反应原生

上一篇：從退出應用程式后離開的螢屏開始-RN

下一篇：如何在axios中將令牌作為引數傳遞