React - 如何在异步函数之外获取获取的数据？

Question

我试图在 fetchUserData() 函数之外获取“body”的数据。 我只想将它存储在一个变量中以备后用。 也尝试修改状态，但也没有用。 感谢您的帮助:)

const [userData, setUserData] = useState();

  async function fetchUserData () {
    try {
    const result = await fetch(`/usermanagement/getdocent`, {
      method: "GET"
    });
    const body = await result.json();
    //setUserData(body);
    return(
      body
    )
    } catch (err) {
      console.log(err);
    }
  }

  let userTestData
  fetchUserData().then(data => {userTestData = data});
  console.log(userTestData);
  //console.log(userData);

Answer 1

使用useEffect

async function fetchUserData () {
  try {
    const result = await fetch(`/usermanagement/getdocent`, {
      method: "GET"
    })

    return await result.json()
  } catch (err) {
    console.log(err)
    return null
  }
}

const FunctionalComponent = () => {
  const [userData, setUserData] = useState()

  useEffect(() => {
    fetchUserData().then(data => {
      data && setUserData(data)
    })
  }, []) // componentDidMount

  return <div />
}

Ben Awad's awesome tutorial

例子：

Answer 2

看起来你让它变得比它应该的更复杂。当您收到响应时，即带有异步函数内数据的已解决承诺，只需设置状态，在下一次渲染中您应该会获得更新的数据。

示例：

const [userData, setUserData] = useState();

useEffect(() => {
 const getResponse = async () => {
  try {
   const result = await fetch(`/usermanagement/getdocent`, {
    method: "GET"
   });
   const body = await result.json();
   setUserData(body);
  } catch (err) {
   console.log(err)
  }
 }

 getResponse();
}, [])

console.log(userData);
return <div></div>

假设您只需要调用一次函数定义并在 useEffect 或“componentDidMount”中调用它。为了在 useEffect 中使用异步函数，我们需要定义另一个函数然后调用它。

Answer 3

当你这样做时

let userTestData

// This line does not wait and next line is executed immediately before userTestData is set
fetchUserData().then(data => {userTestData = data}); 

console.log(userTestData);

// Try changing to 
async someAsyncScope() {
  const userTestData = await fetchUserData();
  console.log(userTestData)
}

---

示例：

state = {
  someKey: 'someInitialValue'
};

async myAsyncMethod() {
  const myAsyncValue = await anotherAsyncMethod();
  this.setState({ someKey: myAsyncValue });
}

/*
 * Then in the template or where ever, use a state variable which you update when 
 * the promise resolves. When a state value is used, once the state is updated, 
 * it triggers as a re-render
*/
render() {
  return <div>{this.state.someKey}</div>;
}

在您的示例中，您将使用 setUserData 而不是 this.setState 和 userData 而不是 {this.state.someKey}