Javascript 调用多个函数进行渲染_Javascript_Reactjs

Javascript 调用多个函数进行渲染

javascript reactjs

Javascript 调用多个函数进行渲染,javascript,reactjs,Javascript,Reactjs,首先，我想解释我想做什么，然后我的问题在哪里最初我做一个获取请求来加载一些数据，因为这里工作正常。在处理完这个数据的一个值之后，我想进行另一次提取。为此，我调用了另一个函数renderImage（），在这里我进行提取并呈现所需的代码我的问题是没有呈现任何内容，因为没有将状态更改为loaded。当然，fetch是异步的，需要更多的时间。我不知道它是如何工作的，而且更简单，因为我觉得我做这件事有点复杂这是我的代码： class Dashboard extends Component{ c

首先，我想解释我想做什么，然后我的问题在哪里

最初我做一个获取请求来加载一些数据，因为这里工作正常。在处理完这个数据的一个值之后，我想进行另一次提取。为此，我调用了另一个函数renderImage（），在这里我进行提取并呈现所需的代码

我的问题是没有呈现任何内容，因为没有将状态更改为loaded。当然，fetch是异步的，需要更多的时间。我不知道它是如何工作的，而且更简单，因为我觉得我做这件事有点复杂

这是我的代码：

class Dashboard extends Component{

constructor(props){
    super(props)
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      }),
      loaded: false,
       datos: '',
    }
}

componentDidMount(){
    this.fetchData();
}

    fetchData(){
        fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData),
            })      
        })
    }

    renderLoadingView(){
        return(
            <View>
            <Text>Cargando...</Text>
            </View>
            )
    }

    async renderImage(receta){
            const REQUEST_URL = "yyyyyyyy" + receta.user_id;
            const response = await fetch(REQUEST_URL);
            const json = await response.json();
            this.setState({ loaded : true});    
            return(       
                    <Card >
                        <CardItem>
                            <Left>
                            <TouchableOpacity>
                            <Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: json.imageUrl}} />     
                            </TouchableOpacity>
                                <Body>
                                    <Text>{receta.Titulo}</Text>
                                    <Text>{receta.Username}</Text>
                                </Body>
                            </Left>
                        </CardItem>
                   </Card>             
            )           
    }


    renderReceta(receta){
            return this.renderImage(receta);                
    }

    render(){       
        if(!this.state.loaded){
            return this.renderLoadingView();
        }
        else{
            return(
            <Container>
                <ListView 
                dataSource={this.state.dataSource}
                renderRow={this.renderReceta.bind(this)}
                />
                </Container>
                )
        }

    }

}

类仪表板扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2
}),
加载：false，
拿督：''，
}
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
获取（请求URL）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（responseData），
})      
})
}
renderLoadingView（）{
返回(
卡甘多。。。
)
}
异步渲染（receta）{
const REQUEST_URL=“yyyyyyyy”+receta.user\u id；
const response=等待获取（请求URL）；
const json=await response.json（）；
this.setState（{loaded:true}）；
报税表（
{receta.Titulo}
{receta.Username}
)           
}
renderReceta（receta）{
返回此.renderImage（receta）；
}
render（）{
如果（！this.state.loaded）{
返回此.renderLoadingView（）；
}
否则{
返回(
)
}
}
}

也许不是“答案”，但问题有点模糊。这可以通过多种方式解决

备选方案一：首先加载数组，然后显示列表，并异步“侧加载”每行的图像。如果你有很多图片，那可能会很糟糕，所以要小心。此外，您可能会在此处加载您可能从未渲染过的图像（它们不在视图中，例如用户从未滚动到它们），但您也不会将它们加载两次以。。。赞成和反对

class Dashboard extends Component{

    constructor(props){
        super(props)
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            loaded: false,
            datos: '',
            images: {

            }
        }
    }

    componentDidMount(){
        this.fetchData();
    }

    fetchData(){
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then ((responseData) =>{
                this.setState({
                    loaded: true,
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                });
                this.fetchImageUrls(responseData);
            });
    }

    fetchImageUrls(responseData){ //assuming respons data is an array of receta objects
        responseData.forEach(({user_id})=>{
            fetch("wwwsomewhere").then(r => r.json()).then(({imageUrl})=>{
                this.setState({
                    images: Object.assign(this.state.images, {
                        [user_id]: imageUrl
                    })
                });
            });
        });
    }

    renderLoadingView(){
        return(
            <View>
                <Text>Cargando...</Text>
            </View>
        )
    }

    renderImage(receta){
        const {Titulo, Username, user_id} = receta;
        return(
            <Card >
                <CardItem>
                    <Left>
                        <TouchableOpacity>
                            {this.state.images[user_id] ?
                                <Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: this.state.images[user_id]}} />
                                : "Loading (load thumb here?)"
                            }
                        </TouchableOpacity>
                        <Body>
                        <Text>{receta.Titulo}</Text>
                        <Text>{receta.Username}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>
        )
    }


    renderReceta(receta){
        return this.renderImage(receta);
    }

    render(){
        if(!this.state.loaded){
            return this.renderLoadingView();
        }
        else{
            return(
                <Container>
                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={this.renderReceta.bind(this)}
                    />
                </Container>
            )
        }
    }
}

类仪表板扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2
}),
加载：false，
拿督：''，
图像：{
}
}
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
获取（请求URL）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
是的，
dataSource:this.state.dataSource.cloneWithRows（responseData），
});
这个.fetchImageUrls（responseData）；
});
}
fetchImageUrls（responseData）{//假设response数据是receta对象的数组
responseData.forEach（{user_id}）=>{
fetch（“wwwsomewhere”）。然后（r=>r.json（））。然后（{imageUrl}）=>{
这是我的国家({
images:Object.assign（this.state.images{
[用户id]：图像URL
})
});
});
});
}
renderLoadingView（）{
返回(
卡甘多。。。
)
}
渲染（receta）{
const{Titulo，Username，user_id}=receta；
返回(
{this.state.images[user_id]？
：“加载（在此处加载拇指？）”
}
{receta.Titulo}
{receta.Username}
)
}
renderReceta（receta）{
返回此.renderImage（receta）；
}
render（）{
如果（！this.state.loaded）{
返回此.renderLoadingView（）；
}
否则{
返回(
)
}
}
}

备选案文2：捆绑upp所有加载到一个，然后解决重新加载

class Dashboard extends Component{

    constructor(props){
        super(props)
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            loaded: false,
            datos: '',
            recetas: {

            }
        }
    }

    componentDidMount(){
        this.fetchData();
    }

    fetchData(){
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then ((responseData) =>{
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                });
                this.fetchImageUrls(responseData);
            });
    }

    fetchImageUrls(responseData){ //assuming respons data is an array of receta objects
        //Load all images
        Promise.all(responseData.map(({user_id})=>{
            return fetch("wwwsomewhere").then(r => r.json());
        })).then((recetasArray)=>{
            //When all thumb objects (Recetas) have been resolved
            //map over the receta object array and create a hash (so you can access them by id later)
            this.setState({
                loaded: true,
                recetas: recetasArray.reduce((acc, receta)=>{
                    acc[recept.user_id] = receta;
                    return acc;
                },{})
            });
        });
    }

    renderLoadingView(){
        return(
            <View>
                <Text>Cargando...</Text>
            </View>
        )
    }

    renderImage(receta){
        const {Titulo, Username, user_id} = receta;
        return(
            <Card >
                <CardItem>
                    <Left>
                        <TouchableOpacity>
                            <Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: this.state.recetas[user_id]}} />
                        </TouchableOpacity>
                        <Body>
                        <Text>{receta.Titulo}</Text>
                        <Text>{receta.Username}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>
        )
    }


    renderReceta(receta){
        return this.renderImage(receta);
    }

    render(){
        if(!this.state.loaded){
            return this.renderLoadingView();
        }
        else{
            return(
                <Container>
                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={this.renderReceta.bind(this)}
                    />
                </Container>
            )
        }
    }
}

类仪表板扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2
}),
加载：false，
拿督：''，
接待处：{
}
}
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
获取（请求URL）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（responseData），
});
这个.fetchImageUrls（responseData）；
});
}
fetchImageUrls（responseData）{//假设response数据是receta对象的数组
//加载所有图像
Promise.all（responseData.map）（{user