JavaScript 使用 async/await 确保我在实现之前检索值，但仍然返回“未定义”

Question

代码

async function getStudents() {
  var reqObj = new RequestHandler("/students/all/");
  let { students } = await reqObj.sendRequest();
  console.log(students, students.length);
  return students;
}

export default function Students(props) {
  var students = getStudents();
  return (
    <main className="content-section">
      <h1>Students</h1>
      <span className="help-text">
        You have {`${students.length}`} students.
      </span>
    </main>
  );
}

...

export class RequestHandler {
  // Base class for handling requests
  constructor(url, method = "GET", contentType = "application/json") {
    this.url = url;
    this.method = method;
    this.contentType = contentType;
    this.request_conf = {
      method: this.method,
      url: this.url,
      headers: {
        "Content-Type": this.contentType,
        "X-CSRFToken": cookies.get("csrftoken"),
      },
      credentials: "same-origin",
    };
  }
  async sendRequest() {
    const response = await axios(this.request_conf);
    var data = isResponseOK(response);
    return data;
  }
}

getStudents() 函数中的console.log(students, students.length); 给了我预期的输出：[] 0，但尽管尝试使其成为一个异步函数等等，Students 组件仍然得到undefined 作为值背部。 在Students 组件中读取相同值的最简单方法是什么？

免责声明

我是 JavaScript 的初学者，尤其是 Promises，所以如果我在这里遗漏了一些非常简单和/或明显的东西，请告诉我，不要对它有害 :)

Answer 1

React 的“渲染”函数是一个同步的纯函数。它不能等待值被呈现。这就是生命周期方法和状态的用途。

使用useState 钩子将students 数组保持在状态，并使用带有空依赖数组的useEffect 钩子来调用getStudents 并等待Promise 解决和排队状态更新和触发重新渲染。

export default function Students(props) {
  // state to hold values
  const [students, setStudents] = React.state([]);

  // effect to fetch values
  React.useEffect(() => {
    getStudents().then(students => setStudents(students));
  }, []); // <-- empty dependency == run once on component mount

  return (
    <main className="content-section">
      <h1>Students</h1>
      <span className="help-text">
        You have {`${students.length}`} students.
      </span>
    </main>
  );
}

文档

• useState
• useEffect

如果您更喜欢 async/await 而不是 Promise 链：

React.useEffect(() => {
  const fetchStudents = async () => {
    try {
      const students = await getStudents();
      setStudents(students);
    } catch(error) {
      // handle error, log it, etc...
    }
  };
  fetchStudents();
}, []);