Hooks를 사용하여 React Render 함수에서 Async Await를 사용하는 방법

React 렌더링 함수에서 비동기 대기

문제 이해

코드에서 렌더링 함수의 지도 함수 내에서 비동기 대기를 사용하려고 시도합니다. 그러나 비동기 함수는 렌더링 함수에서 직접 사용할 수 없으므로 이 접근 방식은 유효하지 않습니다. React의 렌더링 함수는 동기 코드를 기대합니다.

올바른 접근 방식

렌더 함수 내에서 비동기 작업을 사용하려면 두 가지 접근 방식 중 하나를 따를 수 있습니다.

1. 데이터 가져오기 및 구성 요소 분리

데이터 가져오기 논리를 비동기 작업을 처리하는 별도의 구성 요소로 분리합니다. 그런 다음 데이터를 사용할 수 있는 경우에만 UI 구성 요소를 조건부로 렌더링합니다.

class ParentComponent extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? <Child data={this.state.data} /> : null;
  }
}

const Child = ({ data }) => (
  <table>
    <tbody>
      {data.map((x, i) => (
        <tr key={i}>
          {x.map((y, j) => <td key={j}>{y}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

2. 비동기 효과가 있는 후크

React 후크를 사용하여 비동기 작업을 관리합니다.

const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("/some/async/data");
      const json = await resp.json();
      setData(json);
    };
    getData();
  }, []);

  return data ? <Child data={data} /> : null;
};

추가 참고사항

• 사용 예시의 좌표는 실제 경도 및 위도 값으로 대체될 수 있습니다.
• 데이터 레코드에 고유 식별자가 있는 경우 배열 인덱스 대신 키 속성에 해당 식별자를 사용하세요.

위 내용은 Hooks를 사용하여 React Render 함수에서 Async Await를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!