Question

我正在使用fetch方法在服务器上进行API调用。首先，我要求拥有一个对象数组（ [{"id": 1, "name": "a", "userid": "12"},{"id": 2, "name": "b", "userid": "22"},{"id": 3, "name": "c", "userid": "23"}]。

我需要此对象的一个值来提供更多信息（在这种情况下，我需要userid来获取用户的信息）。

为此，我正在做多个请求以显示所有内容。但是做多个请求会给我一个错误。

对象作为React子对象无效（找到：带键的对象{_45， _81，_65，_54}）。如果您要渲染子集合，请使用数组，或使用createFragment（object）包装对象 React附加组件。检查View
的渲染方法

这是我的代码。第二次提取是renderImage函数。我把它作为异步，但我知道这可能是错误的。

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(){
        const REQUEST_URL = "XXXXXXX";
        fetch(REQUEST_URL)
        .then((response) => response.json()) //la convertimos a json
        .then ((responseData) =>{
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData),
            })          
        })
    }

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

    async renderImage(userid){
             const REQUEST_URL = "XXXXXXX" + userid;
             const response = await fetch(REQUEST_URL);
             const json = await response.json();
             this.setState({loaded: true})  
             return (<Thumbnail source={{uri: json.imageUrl}} />)

    }

    renderReceta(receta){
    return(       
                    <Card>
                        <CardItem>
                            <TouchableOpacity onPress={()=> this.onUser(receta)}>
                                 {this.renderImage(receta.user_id)}
                            </TouchableOpacity>
                            <Body>
                                <Text>{receta.Titulo}</Text>
                                <Text>{receta.Username}</Text>
                            </Body>
                          </CardItem>
                   </Card>             
        )   
    }

    render(){

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

    }

}

Answer 1

因此，一种可能的解决方案是为图像设置不同的状态。例如：

this.state = {
      [...]
      imageLoaded: false
}


  fetchData(){
        const REQUEST_URL = "XXXXXXX";
        fetch(REQUEST_URL)
        .then((response) => response.json()) //la convertimos a json
        .then ((responseData) =>{
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData),
            })   
            this.renderImage(); //Now you start loading the Image       
        })
    }


renderImage(userid){
             const REQUEST_URL = "XXXXXXX" + userid;
             const response = await fetch(REQUEST_URL);  //You can change this await and just load the fetch in background, does not matter right now. 
             const json = await response.json();
             this.setState({imageLoaded: true, imageUrl: json.imageUrl})  
    }


 renderReceta(receta){
let image = null;
     if (this.state.imageLoaded)
         image = (<Thumbnail source={{uri: this.state.image.imageUrl}} />);
    return(       
                    <Card>
                        <CardItem>
                            <TouchableOpacity onPress={()=> this.onUser(receta)}>
                                 {image}
                            </TouchableOpacity>
                            <Body>
                                <Text>{receta.Titulo}</Text>
                                <Text>{receta.Username}</Text>
                            </Body>
                          </CardItem>
                   </Card>             
        )   
    }

这段代码不会马上工作，因为我有拼写错误而我剥离了东西，但希望你能明白这一点。

PS。我想我之前回答了类似的问题，请考虑接受你的答案，这样他们就不会得到解决。

多次获取反应

1 个答案: