Question

我的console.log后面跟着顺序tts1，tts2，你好这是我的结果我想要它，你好，这是我的结果，tts1，tts2。我是这个关于 Lifecycle hook 的新手。我尝试了 setState ，它就像一个循环，我希望每次按下按钮时它都会改变

export default function Todoscr({route, navigation}) {
  try {
    var {item} = route.params;
    console.log(`hahaahhihii:${item}`);
    AsyncStorage.setItem(item, JSON.stringify('abc'), () => {
      console.log(`success`);
    });
  } catch {}
useEffect(() => {
    tts();
  });
  const tts = () => {
    danhsachTTS;
    AsyncStorage.getAllKeys((err, result) => {
      console.log(`Hello this is result:${result}`);
      //@ts-ignore
      danhsachTTS = result;
      return result;
    });
  };
  console.log(`tts1`);
return (
    <SafeAreaView style={styles.containner}>
      {console.log(`tts2`)}
      <FlatList
        data={danhsachTTS}
        // data={DSTTS}
        renderItem={({item}) => Item(item)}
      />
      <Button
        onPress={() => {
          navigation.navigate('AddElement');
        }}
        title="Add items"
      />
    </SafeAreaView>
  );
}

Answer 1

我猜你的 usefeect() 有问题

1.没有第二个参数，

useEffect(()=>{})

每次组件渲染时都会调用。

2.第二个参数为[]

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

只有在组件挂载时才会调用（第一次）

3.Second 参数传入的一些参数

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

当参数值改变时会调用。

Answer 2

添加 useEffect 依赖

useEffect(()=>{},[/* dependencies array */])

此外，为了保留值状态，请尝试使用 useState 钩子

const [state, setState] = useState()

反应原生生命周期，循环在 useEffect

2 个答案: