Gọi không đồng bộ trong componentWillMount kết thúc sau khi render phương thức

Question

Tôi đang cố thực hiện cuộc gọi không đồng bộ tới một API trong phương thức componentWillMount. Thật vậy, tôi muốn phương thức render được thực hiện sau phương thức componentWillMount khi tôi cần phải chuyển props đến thành phần trong phương thức render của tôi.

Đây là mã của tôi:

class TennisSearchResultsContainer extends React.Component { 
    componentWillMount() { 
    // TODO: Build markers for the map 
    // TODO: Check courtsResults object and database for tennis court 
    this.courtsMarkers = this.props.courtsResults.map((court) => { 
     return new google.maps.Marker({ 
     position: new google.maps.LatLng(JSON.parse(court.LOC).coordinates[1], JSON.parse(court.LOC).coordinates[0]), 
     title: court.NAME, 
     animation: google.maps.Animation.DROP 
     }); 
    }); 
    } 
    render() { 
    return <TennisSearchResults criterias={this.props.criterias} courtsMarkers={this.courtsMarkers} />; 
    } 
} 

Tôi không hiểu thì tại sao phương pháp làm cho tôi dường như không chờ đợi cho cuộc gọi không đồng bộ để hoàn thành và vượt qua đạo cụ xác định thành phần để con tôi ...

Tôi có đúng không? Và tôi nên làm gì để sửa lỗi đó? Cách xử lý này là gì?

Answer 1

Bạn có thể cần hiểu hành vi async javascript tốt hơn. Không đồng bộ có nghĩa là "không chờ". Nhiệm vụ đó sẽ xảy ra ở chế độ nền và mã khác sẽ tiếp tục thực hiện. Một cách hay để quản lý điều này là đặt trạng thái cho thành phần của bạn. Ví dụ: khi bạn nhập componentWillMount đặt trạng thái loading thành true. Sau đó, khi hàm async của bạn hoàn tất, hãy đặt trạng thái đó thành false. Trong chức năng render, bạn có thể hiển thị thông báo "đang tải ..." hoặc dữ liệu.

Dưới đây là một số mã hiển thị ví dụ đơn giản về tìm nạp dữ liệu không đồng bộ và cách bạn có thể xử lý dữ liệu đó trong React. Mở các công cụ phát triển trong trình duyệt của bạn và xem đầu ra của bàn điều khiển để hiểu vòng đời React tốt hơn.

class MyComponent extends React.Component { 
    constructor(props) { 
    super(); 

    console.log('This happens 1st.'); 

    this.state = { 
     loading: false, 
     data: '' 
    }; 

    } 

    loadData() { 
    // In real life you might use something like 'fetch' inside this 
    // function to get data. 
    // Since 'fetch' returns a promise, we can easily simulate that 
    // to keep the example simple. 
    var promise = new Promise((resolve, reject) => { 
     setTimeout(() => { 
     console.log('This happens 5th (after 3 seconds).'); 
     resolve('This is my data.'); 
     }, 3000); 
    }); 

    console.log('This happens 3rd.'); 

    return promise; 
    } 

    componentWillMount() { 

    console.log('This happens 2nd.'); 

    this.setState({ loading: true }); 
    this.loadData() 
    .then((data) => { 
     console.log('This happens 6th.'); 
     this.setState({ 
     data: data, 
     loading: false 
     }); 
    }); 
    } 

    render() { 

    if (this.state.loading) { 
     console.log('This happens 4th - when waiting for data.'); 
     return <h2>Loading...</h2>; 
    } 

    console.log('This happens 7th - after I get data.'); 
    return (
     <div> 
     <p>Got some data!</p> 
     <p>{this.state.data}</p> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <MyComponent />, 
    document.getElementsByClassName('root')[0] 
); 

Và đây là working example on CodePen.