React-Native 和异步函数：设置条件值

Question

我正在尝试 return iconColor 道具的条件值。如果值为 Fav returns true 我想将 iconColor 设置为红色，否则它应该是白色。我已经为变量 red 分配了一个十六进制值，而 white（字符串）被我正在使用的样式库识别。尽管 isFav() returning 为 false（我已经记录了该值），但 iconColor 始终为红色。你知道为什么会这样吗？

感谢您的帮助！

 async function isFav(title) {
    const value = await AsyncStorage.getItem(title)
    if (value) {
      return true;
    } else {
      return false;
    }
  }

  function _renderItem({ item }, navigation) {
    return (
      <TouchableWithoutFeedback onPress={() => navigation.navigate("oneRecipe", {item: item})}>
        <View style={styles.recipesItem}>
          <CardTextComponent
            imageUri={item.image}
            title={item.title}
            subtitle={`Your Ingredients: ${item.usedIngredientCount}`}
            showFavs={true}
            iconColor={(async() => isFav()) ? red : "white"}
          />
        </View>
      </TouchableWithoutFeedback>
    );
  }

Answer 1

为什么不改用州？

const [isFav, setIsFav] = useState(false);

const _isFav = async ()=> {
    const value = await AsyncStorage.getItem(title)
    if (value) {
      return setIsFav(true);
    }
    return setIsFav(false);
}

useEffect(()=>{
    _isFav()
},[])

const _renderItem = ({ item }, navigation)=> {
    return (
      <TouchableWithoutFeedback onPress={() => navigation.navigate("oneRecipe", {item: item})}>
        <View style={styles.recipesItem}>
          <CardTextComponent
            imageUri={item.image}
            title={item.title}
            subtitle={`Your Ingredients: ${item.usedIngredientCount}`}
            showFavs={true}
            iconColor={ isFav ? "red" : "white"}
          />
        </View>
      </TouchableWithoutFeedback>
    );
  }

React-Native 和异步函数：设置条件值

React-Native & async functions: Setting conditional value

callback

conditional-statements

async-await

react-native