React Render 함수에서 비동기적으로 데이터를 가져오는 방법

How to Use async/await in React Render Functions

In React, the render function is typically intended for pure, synchronous operations. However, in certain scenarios, you may encounter the need to perform asynchronous tasks within this function. This article will address how to effectively use the async/await syntax in the render function.

Understanding the Issue

As the question highlights, attempting to use async/await directly within the map function in the render function can result in unexpected behavior. This is because the map function expects synchronous operations, and attempting to perform asynchronous calls within it can disrupt the flow of the rendering process.

Separating Data Fetching from Displaying

To resolve this issue, it's recommended to separate the data fetching process from the display logic. Instead of performing asynchronous operations within the render function, it's more appropriate to initiate the data fetching in a separate component or hook.

Asynchronous Data Fetching in Parent Component

In this approach, you create a parent component (e.g., ParentThatFetches) responsible for making asynchronous requests and managing the data. Utilizing the lifecycle methods or hooks, the parent component fetches the data and stores it in the state. Subsequently, the parent component conditionally renders a pure functional child component (e.g., Child) that receives the fetched data as props.

class ParentThatFetches extends React.Component {
constructor () {

this.state = {};

}

componentDidMount () {

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

}

render () {

{this.state.data && (
  <Child data={this.state.data} />
)}

}
}

const Child = ({ data }) => (

{data.map((x, i) => (<td key={i}>{x}</td>))}

);

Fetching Data Using Hooks

With the advent of hooks in React, data fetching can be simplified further. The following code snippet demonstrates how to use hooks to fetch data asynchronously and update the state accordingly:

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

}, []);

return data &&
}

위 내용은 React Render 함수에서 비동기적으로 데이터를 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!