从 useState 中的异步函数获取值

Question

我正在使用async storage 来检索我的数据，但如何将它与 useState() 一起使用？

例子：

async function getdata(){
let d= await AsyncStorage.getItem('Name');
return d;
}

export default function App() {
 const [name, setName] = useState(() => getdata());
 return (<View>...</View>)
}

但这不起作用，因为 getdata() 是异步的，那么我该如何解决这个问题？

编辑：

我忘了说我试过 useEffect() Hook 是这样的：

async function getdata(){
let d= await AsyncStorage.getItem('Name');
console.log('retrieved Data!');
return d;
}

const [name, setName] = useState(()=>0);
  useEffect(() => {
    getData().then(setName);
    console.log('moving on...');
  }, []);

但执行顺序是：

“继续……”
'检索数据！'

应该是相反的地方

Answer 1

您会将您的状态初始化为某个空值。也许是一个空字符串，也许是一个空值。如果你愿意，你可以让你的组件在这段时间内渲染一些不同的东西，比如加载指示器。然后一旦数据加载，你可以设置状态再次渲染。

export default function App() {
  const [name, setName] = useState(null);
  useEffect(() => {
    getData().then(value => setName(value));
  }, []);

  if (name === null) {
    return <Text>Loading...</Text>
  } else {
    return (<View>...</View>)
  }
}

Answer 2

你必须使用useEffect

export default function App() {
  const [name, setName] = useState('');

  useEffect(() => {
    const bootstrap = async () => {
      const name = await getdata();
      setName(name);
    };
    bootstrap();
  }, []);
  return <View>...</View>;
}

Answer 3

我认为这里最好的解决方案是将 name 初始化为 false，然后在 .then() 回调中使用 'setName'。 setName（以及那些通常来自 useState 的 setter 函数）旨在作为一种异步更新该值的方式。

我在这里将名称设置为布尔值“假”并严格检查。如果存在该名称字段为空的情况，则可以将其设置为空字符串而不会导致无限循环。

async function getdata(){
let d= await AsyncStorage.getItem('Name');
return d;
}

export default function App() {
 const [name, setName] = useState(false);

 useEffect(() => {
  if (name === false) {
   getData().then((name) => {
    setName(name);
   });
  }
 }, []);
 
 return (<View>...</View>)
}

请记住，您的视图必须能够处理错误的名称值。如何做到这一点取决于您。

^^^上述解决方案应该可以有效地解决您的问题，但我会在这里快速说明：如果您的组件相对复杂，它可能会由于其他原因重新渲染多次，因此会运行 if( name === false) 条件，因为它等待回调解决。这不会破坏事情，但它会对异步存储造成不必要的影响，并可能影响性能。如果您发现是这种情况，请使用下面的有用文章查看“去抖动”回调。 https://medium.com/@gabrielmickey28/using-debounce-with-react-components-f988c28f52c1