在 React 中使用异步和等待进行重构？

Question

来自 Java 背景的我（非常）新反应。我正在尝试重构一些现有代码以使用异步和等待。

错误出现在我的渲染函数（）（用 ***** 突出显示）之前，并且我得到一个“/src/App.js: Unexpected token, expected”，错误和无法终生弄清楚发生了什么。我试过弄乱 } ) 和 ; 并不能完全追踪它。感谢任何帮助。

import React, { Component } from "react";
import { FixedSizeGrid } from "react-window";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      specialties: [],
      isLoaded: false,
      error: null
    };
  }

  async componentDidMount() {
    const response = await fetch (url)
    .then(response => response.json())
    .then(body => {
      const specialties = body.data.specialties;
      return specialties;
    })
    .then(specialties => {
      return specialties.map(({ _id, name }) => {
        return [_id, name];
      })


      .then(transformed => {
        this.setState({
          specialties: transformed,
          isLoaded: true,
          error: null
        });
      })

      .catch(error => {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
         });
      });
    }




  render() {***********************here 
    if (this.state.error) {
      return <span style={{ color: "red" }}>{this.state.error.message}</span>;
    }

    if (!this.state.isLoaded) {
      return "Loading...";
    }

    const ITEM_HEIGHT = 35;

    return (
      <FixedSizeGrid
        columnWidth={300}
        rowHeight={35}
        itemData={this.state.specialties}
        height={ITEM_HEIGHT * this.state.specialties.length}
        width={600}
        itemSize={() => ITEM_HEIGHT}
        columnCount={2}
        rowCount={this.state.specialties.length}
      >
        {SpecialtyYielder}
      </FixedSizeGrid>
    );
  }
}

const SpecialtyYielder = ({ columnIndex, rowIndex, data, style }) => {
  return (
    <div
      style={{
        ...style,
        backgroundColor:
          (rowIndex + columnIndex) % 2 ? "beige" : "antiquewhite",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      {data[rowIndex][columnIndex]}
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您缺少括号和括号：

  async componentDidMount() {
    const response = await fetch (url)
    .then(response => response.json())
    .then(body => {
      const specialties = body.data.specialties;
      return specialties;
    })
    .then(specialties => {
      return specialties.map(({ _id, name }) => {
        return [_id, name];
      })
    })  // missing closing bracket and paren


      .then(transformed => {
        this.setState({
          specialties: transformed,
          isLoaded: true,
          error: null
        });
      })

      .catch(error => {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
         });
      });
    }

异步/等待
基本上在你使用then 的所有地方，你都可以使用await，但是这样你就不需要一堆回调并且逻辑就像同步代码：

  async componentDidMount() {
    try {
      const response = await fetch (url)
      const body = await response.json()
      const specialties = body.data.specialties;
      const transformed = specialties.map(({ _id, name }) => {
        return [_id, name]
      })
      this.setState({
          specialties: transformed,
          isLoaded: true,
          error: null
      })
    }
    catch(error) {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
        })
    }
  }

Answer 2

看起来您可能需要更好的文本编辑器；）。它在您的componentDidMount 中。最后你错过了一个)，关闭你的.then块，然后用另一个花括号关闭componentDidMount

  async componentDidMount() {
    const response = await fetch (url)
    .then(response => response.json())
    .then(body => {
      const specialties = body.data.specialties;
      return specialties;
    })
    .then(specialties => {
      return specialties.map(({ _id, name }) => {
        return [_id, name];
      })


      .then(transformed => {
        this.setState({
          specialties: transformed,
          isLoaded: true,
          error: null
        });
      })

      .catch(error => {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
         });
      });
    })
}

这解决了您的语法错误。您提出问题的方式看起来好像您认为它的“解决方案”是使用async/await。您显然仍然可以进行重构。您是否还有兴趣探索 async/await？

Answer 3

您在componentDidMount 方法中缺少})：

import React, { Component } from "react";
import { FixedSizeGrid } from "react-window";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      specialties: [],
      isLoaded: false,
      error: null
    };
  }

  async componentDidMount() {
    const response = await fetch (url)
    .then(response => response.json())
    .then(body => {
      const specialties = body.data.specialties;
      return specialties;
    })
    .then(specialties => {
      return specialties.map(({ _id, name }) => {
        return [_id, name];
      })


      .then(transformed => {
        this.setState({
          specialties: transformed,
          isLoaded: true,
          error: null
        });
      })

      .catch(error => {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
         });
      });
    })}



  render() {




    const ITEM_HEIGHT = 35;

    return (
      <FixedSizeGrid
        columnWidth={300}
        rowHeight={35}
        itemData={this.state.specialties}
        height={ITEM_HEIGHT * this.state.specialties.length}
        width={600}
        itemSize={() => ITEM_HEIGHT}
        columnCount={2}
        rowCount={this.state.specialties.length}
      >
        {SpecialtyYielder}
      </FixedSizeGrid>
    );
  }
}

const SpecialtyYielder = ({ columnIndex, rowIndex, data, style }) => {
  return (
    <div
      style={{
        ...style,
        backgroundColor:
          (rowIndex + columnIndex) % 2 ? "beige" : "antiquewhite",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      {data[rowIndex][columnIndex]}
    </div>
  );
};