ฉันจะตั้งค่าเพื่อให้คุณใช้ตัวแปรสถานะโกลบอลเพื่อบอกส่วนประกอบของคุณเมื่อต้องเรนเดอร์ Redux ดีกว่าสำหรับสถานการณ์นี้ที่มีหลาย ๆ องค์ประกอบพูดคุยกันและคุณพูดถึงความคิดเห็นที่คุณใช้ในบางครั้ง ดังนั้นฉันจะร่างคำตอบโดยใช้ Redux
คุณจะต้องย้ายการเรียก API Component Aของคุณเพื่อภาชนะแม่ หากคุณต้องการให้ลูกหลานของคุณแสดงผลหลังจากที่การเรียก API เสร็จสมบูรณ์คุณจะไม่สามารถเก็บการเรียก API เหล่านั้นไว้ในตัวหลานได้ การเรียก API สามารถทำได้จากส่วนประกอบที่ยังไม่มีอยู่ได้อย่างไร?
เมื่อมีการเรียกใช้ API ทั้งหมดคุณสามารถใช้การกระทำเพื่ออัปเดตตัวแปรสถานะโกลบอลที่มีกลุ่มของวัตถุข้อมูล ทุกครั้งที่มีการรับข้อมูล (หรือจับข้อผิดพลาด) คุณสามารถส่งการกระทำเพื่อตรวจสอบว่าวัตถุข้อมูลของคุณเต็มแล้วหรือไม่ เมื่อเติมเต็มแล้วคุณสามารถอัปเดตloadingตัวแปรเป็นfalseและแสดงGridองค์ประกอบของคุณแบบมีเงื่อนไข
ตัวอย่างเช่น:
// Component A
import { acceptData, catchError } from '../actions'
class ComponentA extends React.Component{
componentDidMount () {
fetch('yoururl.com/data')
.then( response => response.json() )
// send your data to the global state data array
.then( data => this.props.acceptData(data, grandChildNumber) )
.catch( error => this.props.catchError(error, grandChildNumber) )
// make all your fetch calls here
}
// Conditionally render your Loading or Grid based on the global state variable 'loading'
render() {
return (
{ this.props.loading && <Loading /> }
{ !this.props.loading && <Grid /> }
)
}
}
const mapStateToProps = state => ({ loading: state.loading })
const mapDispatchToProps = dispatch => ({
acceptData: data => dispatch( acceptData( data, number ) )
catchError: error=> dispatch( catchError( error, number) )
})
// Grid - not much going on here...
render () {
return (
<div className="Grid">
<GrandChild1 number={1} />
<GrandChild2 number={2} />
<GrandChild3 number={3} />
...
// Or render the granchildren from an array with a .map, or something similar
</div>
)
}
// Grandchild
// Conditionally render either an error or your data, depending on what came back from fetch
render () {
return (
{ !this.props.data[this.props.number].error && <Your Content Here /> }
{ this.props.data[this.props.number].error && <Your Error Here /> }
)
}
const mapStateToProps = state => ({ data: state.data })
ตัวลดของคุณจะเห็นวัตถุสถานะโลกซึ่งจะบอกว่าสิ่งต่าง ๆ พร้อมที่จะไปหรือไม่:
// reducers.js
const initialState = {
data: [{},{},{},{}...], // 9 empty objects
loading: true
}
const reducers = (state = initialState, action) {
switch(action.type){
case RECIEVE_SOME_DATA:
return {
...state,
data: action.data
}
case RECIEVE_ERROR:
return {
...state,
data: action.data
}
case STOP_LOADING:
return {
...state,
loading: false
}
}
}
ในการกระทำของคุณ:
export const acceptData = (data, number) => {
// First revise your data array to have the new data in the right place
const updatedData = data
updatedData[number] = data
// Now check to see if all your data objects are populated
// and update your loading state:
dispatch( checkAllData() )
return {
type: RECIEVE_SOME_DATA,
data: updatedData,
}
}
// error checking - because you want your stuff to render even if one of your api calls
// catches an error
export const catchError(error, number) {
// First revise your data array to have the error in the right place
const updatedData = data
updatedData[number].error = error
// Now check to see if all your data objects are populated
// and update your loading state:
dispatch( checkAllData() )
return {
type: RECIEVE_ERROR,
data: updatedData,
}
}
export const checkAllData() {
// Check that every data object has something in it
if ( // fancy footwork to check each object in the data array and see if its empty or not
store.getState().data.every( dataSet =>
Object.entries(dataSet).length === 0 && dataSet.constructor === Object ) ) {
return {
type: STOP_LOADING
}
}
}
นอกเหนือ
หากคุณแต่งงานกับความคิดที่ว่าการเรียก API ของคุณอาศัยอยู่ในหลานแต่ละคน แต่ตารางลูกหลานทั้งหมดไม่แสดงจนกว่าการเรียก API ทั้งหมดจะเสร็จสมบูรณ์คุณจะต้องใช้โซลูชันที่แตกต่างกันโดยสิ้นเชิง ในกรณีนี้ลูกหลานของคุณจะต้องถูกเรนเดอร์ตั้งแต่เริ่มต้นเพื่อทำการโทร แต่มีคลาส css ด้วยdisplay: noneซึ่งจะเปลี่ยนแปลงเฉพาะหลังจากตัวแปรสถานะโกลบอลloadingถูกทำเครื่องหมายเป็นเท็จ สิ่งนี้สามารถทำได้ แต่เรียงลำดับจากจุดของ React
