在async await中 this.setState之后 render为什么拿不到值

在JavaScript的React中，当你在`async`函数内部使用`await`等待异步操作完成，并随后调用`this.setState`来更新组件状态时，可能会遇到`render`函数无法立即接收到新设置的状态值的问题。这是因为React setState是一个异步过程，它不会立即改变组件自身的状态。

当`setState`被触发，React会将一个新的状态对象放入一个队列中，然后在下一次React渲染循环中（通常是在下一个`tick`）再进行状态的实际更新。如果你在这期间试图在`render`中直接访问新的状态值，可能会获取到旧的状态。

解决这个问题的一种常见做法是在`componentDidUpdate`或者`useEffect`中加入一个条件检查，确保在状态真正更新后再执行后续的操作。例如：

// 使用useEffect
useEffect(() => {
  if (newState !== prevState) {
    // 状态已经更新，可以在此处理新的值
    console.log(yourNewState);
  }
}, [yourNewState, prevState]);

// 或者在 componentDidUpdate 钩子中
componentDidUpdate(prevProps, prevState) {
  if (prevState !== this.state) {
    // 状态已更新，获取新值并渲染
  }
}

相关问题

import React, { Component } from 'react'; import { Text, View } from 'react-native'; import NfcManager, { NfcTech, Ndef } from 'react-native-nfc-manager'; export default class App extends Component { state = { message: '', }; componentDidMount() { NfcManager.start(); NfcManager.setEventListener(NfcManager.EVENT_NDEF_DISCOVERED, this.onNfcReceived); } componentWillUnmount() { NfcManager.setEventListener(NfcManager.EVENT_NDEF_DISCOVERED, null); NfcManager.stop(); } onNfcReceived = async (tag) => { const ndef = await NfcManager.ndefHandler.parseUri(tag.ndefMessage[0].payload); this.setState({ message: ndef }); }; sendNfcMessage = async () => { try { await NfcManager.requestTechnology(NfcTech.Ndef, { alertMessage: 'Ready to send NFC message', }); const bytes = Ndef.encodeMessage([Ndef.textRecord('Hello, world!')]); await NfcManager.ndefHandler.writeNdefMessage(bytes); NfcManager.cancelTechnologyRequest(); } catch (error) { console.warn('Error sending NFC message', error); } }; render() { return ( <View> <Text>{this.state.message}</Text> <Button title="Send NFC Message" onPress={this.sendNfcMessage} /> </View> ); } }优化上面的代码，编译没有通过

根据您提供的代码，我看到您没有导入 `Button` 组件，这可能会导致编译错误。您可以通过以下方式导入 `Button` 组件：

import { Text, View, Button } from 'react-native';

另外，您在写 `setState` 时，需要将 `ndef` 对象中的 `uri` 属性作为参数传递给 `setState`，而不是直接将 `ndef` 对象作为参数传递。因此，您需要将 `onNfcReceived` 函数中的代码修改为以下内容：

onNfcReceived = async (tag) => {
  const ndef = await NfcManager.ndefHandler.parseUri(tag.ndefMessage[0].payload);
  this.setState({ message: ndef.uri });
};

最后，为了避免可能出现的内存泄漏，建议您在组件卸载时手动移除 `NfcManager` 的事件监听器。因此，您需要将 `componentWillUnmount` 函数中的代码修改为以下内容：

componentWillUnmount() {
  NfcManager.setEventListener(NfcManager.EVENT_NDEF_DISCOVERED, null);
  NfcManager.unregisterTagEvent();
  NfcManager.stop();
}

修改后的代码如下：

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import NfcManager, { NfcTech, Ndef } from 'react-native-nfc-manager';

export default class App extends Component {
  state = {
    message: '',
  };

  componentDidMount() {
    NfcManager.start();
    NfcManager.setEventListener(NfcManager.EVENT_NDEF_DISCOVERED, this.onNfcReceived);
  }

  componentWillUnmount() {
    NfcManager.setEventListener(NfcManager.EVENT_NDEF_DISCOVERED, null);
    NfcManager.unregisterTagEvent();
    NfcManager.stop();
  }

  onNfcReceived = async (tag) => {
    const ndef = await NfcManager.ndefHandler.parseUri(tag.ndefMessage[0].payload);
    this.setState({ message: ndef.uri });
  };

  sendNfcMessage = async () => {
    try {
      await NfcManager.requestTechnology(NfcTech.Ndef, {
        alertMessage: 'Ready to send NFC message',
      });

      const bytes = Ndef.encodeMessage([Ndef.textRecord('Hello, world!')]);
      await NfcManager.ndefHandler.writeNdefMessage(bytes);

      NfcManager.cancelTechnologyRequest();
    } catch (error) {
      console.warn('Error sending NFC message', error);
    }
  };

  render() {
    return (
      <View>
        <Text>{this.state.message}</Text>
        <Button title="Send NFC Message" onPress={this.sendNfcMessage} />
      </View>
    );
  }
}

希望这些修改能够帮助您解决问题。

允许在生命周期函数中使用async await

在React组件的生命周期函数中使用`async/await`语法，可以使得异步操作更加直观和易于管理。从React 16.8开始，引入了Hooks，特别是`useEffect`和`useState`，这为在功能性组件中处理副作用和状态提供了更简洁的方式。

对于类组件，如果你想在生命周期函数中使用`async/await`，你通常不能直接在生命周期方法（如`componentDidMount`）中使用`await`，因为这些方法预期是同步执行的。但是，你可以通过一些技巧来实现这一点：

1. **使用额外的方法来处理异步逻辑**: 你可以在类组件中定义一个单独的异步方法来处理你的异步逻辑，然后在生命周期方法中调用这个方法。

   class MyComponent extends React.Component {
     async fetchData() {
       const data = await someAsyncOperation();
       this.setState({ data });
     }

     componentDidMount() {
       this.fetchData();
     }

     render() {
       return (
         <div>{this.state.data ? this.state.data : 'Loading...'}</div>
       );
     }
   }

2. **错误边界**: 在使用异步操作时，正确处理错误非常重要。你可以使用try/catch块来捕获并处理可能发生的错误。

   class MyComponent extends React.Component {
     async fetchData() {
       try {
         const data = await someAsyncOperation();
         this.setState({ data });
       } catch (error) {
         console.error('Error fetching data:', error);
         this.setState({ error });
       }
     }

     componentDidMount() {
       this.fetchData();
     }

     render() {
       return (
         <div>{this.state.error ? this.state.error.message : 'Loading...'}</div>
       );
     }
   }

对于函数式组件，你可以利用`useEffect` Hook来处理副作用，包括异步操作。这使得代码更加简洁，并且可以直接在`useEffect`内部使用`await`。

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await someAsyncOperation();
        setData(result);
      } catch (err) {
        setError(err);
      }
    };

    fetchData();
  }, []); // 空数组确保这个效应只在组件挂载和卸载时运行

  return (
    <div>{error ? error.message : data ? JSON.stringify(data) : 'Loading...'}</div>
  );
}

在这个例子中，`useEffect`钩子用于模仿组件的`componentDidMount`生命周期方法。它接受一个回调函数和一个依赖数组作为参数。当组件挂载时（以及每次依赖项变化时），该回调函数会被调用。由于我们传递了一个空数组作为依赖项，这意味着`fetchData`只会在组件首次挂载时执行一次。