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;
  }
}

函数console.log(students, students.length);内部getStudents()给出的输出正如我所期望的：[] 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>
  );
}

文档

• 使用状态
• 使用效果

如果您更喜欢async/awaitPromise 链：

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