React Native - 让 return() 等到变量被定义

Question

我以异步方式获取数据，然后使用 {data}.

在 render() 函数中显示它

现在我的问题是，如何让 render() 函数等待变量被定义？目前要么占位符变量没有改变，要么永远不会到达。

这是我的代码，

let [data] = useState();

    let storeData = async (value) => {
        try {
            await AsyncStorage.setItem('locatie', value)
        } catch (e) {
            console.log(e)
        }
    }

    let getInfo = async () => {
        data = await AsyncStorage.getItem('locatie');
        return data;
    }

    useEffect(() => {
        getInfo().then(r => console.log('getInfo called, data var = ' + data))
    })

    console.log('return() initiate, data var = ' + data)

并在此处显示：

<TextInput value={data !== undefined ? data : 'placeholder'} onChangeText={(value) => storeData(value)}/>

显然，由于它是异步的，render() 发生在函数之前。

如有任何帮助，我们将不胜感激。请不要喷我第一次使用 React Native :)

另外，请注意它在一个函数中，我没有使用类也不会使用它们。

Answer 1

而不是let [data] = useState(); 写 const [data, setData] = useState(); 并在 then() 内更新 useEffect 钩子内的状态在你的情况下，在承诺 returns 一些数据之后。

Answer 2

您应该了解有关使用 React Hooks 的更多信息。无论如何，您可以参考下面的问题。

const [data, setData] = useState('');

const storeData = async (value) => {
  try {
    setData(value);
    await AsyncStorage.setItem('locatie', value);
  } catch (e) {
    console.log(e);
  }
};

const getInfo = async () => {
  const res = await AsyncStorage.getItem('locatie');
  setData(res);
};

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

React Native - 让 return() 等到变量被定义

React Native - let return() wait until variable is defined

javascript

reactjs

native