useEffect 使用异步存储重新渲染不同的值，使构建设置屏幕变得不可能

Question

我对 react-native 很陌生，我正在尝试在我的食谱搜索应用程序中实现一个设置屏幕。基本上用户可以选择不同的过滤器来避免某种食物（如素食或无牛奶等），我想为每个过滤器制作一个带有数字的数组，然后在搜索页面中传递数组并应用过滤器添加每个过滤器的一段字符串。问题是：useEffect 在第一次渲染时使用异步存储渲染我传递的数组为空，它只在第二次渲染时实现，我怎样才能使用填充数组而不是空数组？

const [richiesta, setRichiesta] = React.useState('');
    const [data, setData] = React.useState([]);
    const [ricerca, setRicerca] = React.useState("");
    const [preferenza, setPreferenza] = React.useState([]);
    let searchString = `https://api.edamam.com/search?q=${ricerca}&app_id=${APP_ID}&app_key=${APP_KEY}`;
    
    useEffect(() => {
        getMyValue();
        getPreferences(preferenza);
    },[])

    const getMyValue = async () => {
        try{
             const x = await AsyncStorage.getItem('preferenza') 
             setPreferenza(JSON.parse(x));
        } catch(err){console.log(err)}
    }

    const getPreferences = (preferenza) => {
        if(preferenza === 1){
            searchString = searchString.concat('&health=vegan')
        }
        else { console.log("error")}
    }

    
    
    //useEffect 
    useEffect(() => {
        getRecipes();
    }, [ricerca])

    //fetching data
    const getRecipes = async () => {
        const response = await fetch(searchString);
        const data = await response.json();
        setData(data.hits);
    }

    //funzione ricerca (solo scrittura)
    const onChangeSearch = query => setRichiesta(query);

    //funzione modifica stato di ricerca
    const getSearch = () => {
        setRicerca(richiesta);
    }


    //barra ricerca e mapping data
    return(
   <SafeAreaView style={styles.container}>

         <Searchbar
         placeholder="Cerca"
         onChangeText={onChangeSearch}
         value={richiesta}
         onIconPress={getSearch}
         />

这是代码，它 returns “错误”，因为在第一次渲染时数组是空的，但在第二次渲染时它填充了值 1。有人可以帮我吗？

Answer 1

通过监听 preferenza 的状态。您需要将 getPreferences(preferenza); 从第一次渲染的 useEffect 中排除，并将其放入自己的 useEffect 中，如下所示：

...
useEffect(() => {
  getMyValue();
}, [])

useEffect(() => {
  if( !preferenza.length ) return;
  getPreferences(preferenza);
}, [preferenza])

Answer 2

我忘了把数组的索引放在

        if(preferenza === 1){
            searchString = searchString.concat('&health=vegan')
        }
        else { console.log("error")}
    }

谢谢你的回答，祝你有愉快的一天！

useEffect 使用异步存储重新渲染不同的值，使构建设置屏幕变得不可能

useEffect re-render different values making impossible build setting screen using async storage

javascript

reactjs

react-native

asyncstorage