时间戳

首页 > 解决方案 > 如何在本机反应中更新函数内部的状态？

react-native - 如何在本机反应中更新函数内部的状态？

问题描述

我有一个简单的功能组件，根据状态我显示“添加项目”或“删除项目”按钮：

const SimpleComponent = ({ route }) => {
  const { id } = route.params;
  const [add, setAdd] = useState(false);

  useEffect(() => {
      { isCurrentUserHavingThisItem(route, id) ?
        setAdd(true)
        :
        setAdd(false)
      }
  }, [])
  return (
    <View >
    { add ?
      (
        <TouchableOpacity onPress={() => removeItem(route, id)}>
          <Text> Remove this item </Text>
        </TouchableOpacity>
      )
      :(
        <TouchableOpacity onPress={() => addItem(route, id)}>
          <Text> Add item </Text>
        </TouchableOpacity>
      )
    }
    </View>
  );
};

const isCurrentUserHavingThisItem = (route, id) => {
  firebase.firestore()
        .collection('Users')
        .doc(id)
        .collection('Items')
        .doc(route.params.item.key)
        .get()
        .then((docSnapshot) => {
          console.log("my return statement: ", docSnapshot.exists);
          setAttending(docSnapshot.exists);
          return docSnapshot.exists;
          })
        .catch((error) => {
          console.log(error);
          return false;
        });
}

我认为这isCurrentUserHavingThisItem很好。但是，当我按下“添加项目”时，我会触发以下功能：

const addItem = (route, id) => {
  firebase.firestore()
        .collection('Users')
        .doc(id)
        .collection('Items')
        .doc(route.params.item.key)
        .set({})
        .then(setAdd(true));
}

这给了我以下错误：ReferenceError: Can't find variable: setAdd 我还尝试了以下方法：

const addItem = (route, id) => {
      firebase.firestore()
            .collection('Users')
            .doc(id)
            .collection('Items')
            .doc(route.params.item.key)
            .set({});
      setAdd(true);
    }

但它给了我同样的错误。这是整个组件结构，以获得更好的可见性：

const SimpleComponent = ({ route }) => {
  const { id } = route.params;
  const [add, setAdd] = useState(false);

  useEffect(() => {
      { isCurrentUserHavingThisItem(route, id) ?
        setAdd(false)
        :
        setAdd(true)
      }
  }, [])
  return (
    <View>
    { add ?
      (
        <TouchableOpacity onPress={() => removeItem(route, id)}>
          <Text style={styles.title}>Remove item</Text>
        </TouchableOpacity>
      )
      :(
        <TouchableOpacity onPress={() => addItem(route, id)}>
          <Text style={styles.title}>Add item</Text>
        </TouchableOpacity>
      )
    }
 
    </View>
  );
};

const isCurrentUserHavingThisItem = (route, id) => {
  //same as I described it above; I think it works fine
}

const addItem = (route, id) => {
  //same as described above
  //gives me error when I try to update the state
}

const leaveMeetup = (route, id) => {
  //same as described above
  //gives me error when I try to update the state
}
export default SimpleComponent;

基本上，在我成功添加项目后，我想显示“删除项目”按钮，反之亦然。为此，我尝试更新状态，但正如我所说，我有ReferenceError: Can't find variable: setAdd错误，我不明白为什么。有人可以帮忙吗？

标签： react-native

解决方案

您的 setAdd 方法位于组件之外，这就是它显示该错误的原因......请像这样将您的方法移动到您的功能组件中。

const SimpleComponent = ({ route }) => {
  const { id } = route.params;
  const [add, setAdd] = useState(false);

  const isCurrentUserHavingThisItem = (route, id) => {}

  const addItem = (route, id) => {}

  const leaveMeetup = (route, id) => {}

  useEffect(() => {
      { isCurrentUserHavingThisItem(route, id) ?
        setAdd(false)
        :
        setAdd(true)
      }
  }, [])
  return (
    <View>
    { add ?
      (
        <TouchableOpacity onPress={() => removeItem(route, id)}>
          <Text style={styles.title}>Remove item</Text>
        </TouchableOpacity>
      )
      :(
        <TouchableOpacity onPress={() => addItem(route, id)}>
          <Text style={styles.title}>Add item</Text>
        </TouchableOpacity>
      )
    }
 
    </View>
  );
};


export default SimpleComponent;

我认为你不能这样做。 .then(setAdd(true));

你得到一个回调.then()

所以正确的方法是

.then(()=>{
  setAdd(true)
 }).

推荐阅读