首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在<FlatList>上显示fetch()中的数组?

如何在<FlatList>上显示fetch()中的数组?
EN

Stack Overflow用户
提问于 2018-08-11 02:26:13
回答 3查看 725关注 0票数 1

请记住,我对react-native和所有这些都是新手,所以请期待一些愚蠢的代码。

我很难尝试在一个简单的视图中显示它们,但它不起作用。

即使使用componentDidMount(),它也会显示错误'null is not a object‘(计算'this.state.groups.map')

如果你们有任何建议,教程或指南,请随时分享。

代码语言:javascript
复制
    export default class Request extends Component {

      state = {
        id: null,
        cod: '',
        description: '',
        groups: null,
      }

       componentDidMount(){
         this.pullRequest()
       }

      pullRequest = async() => {

        try{
          const response = await fetch(url)

          const results = await response.json()

          this.setState({groups: results.group})

          console.log(results)

          console.log(this.state.groups[0])
        }catch(err){
          console.error(err)
        }
      }

      postRequest = async() => {

        const model = { 'id'         : this.state.id,
                        'cod'        : this.state.cod,
                        'description': this.state.description,
                        'entity'     : this.state.id, //yeet
                      }
        try{
          const response = 
          await fetch(url,{
            method: 'POST',
            headers: {
               'Content-Type': 'application/json'
            },
            body: JSON.stringify(model),
      })

          const result = await response.json()

          this.setState({groups : result.group})

          console.log(this.state.groups)

          console.log('postresult: ')
          console.log(result)
        }catch(err){
          console.error(err)
        }
      }

      handleRequestId = id => {
        this.setState({id})
      }
      handleRequestCod = cod => {
        this.setState({cod})
      }
      handleRequestDescription = description => {
        this.setState({description})
      }

      requestPress = id => {
        // this.setState({tSample: this.state.id})
      }

      render() {
        return (
          <KeyboardAvoidingView behavior="padding" style={styles.loginContainer}>
            <TouchableWithoutFeedback onPress={Keyboard.dismiss} >
              <View style={[styles.logoContainer]}>
                <Image
                  style={styles.logo}
                  source={require('../assets/Icons/logo.png')}
                />
                //<Text style={styles.title}>NODE</Text>
                <View style={styles.voidView} > // I'm trying to show it here.
                  {this.state.groups.map(group => (
                    <Text>{group.cod}</Text>
                  ))}
                </View>
              </View>
            </TouchableWithoutFeedback>
            <View style={styles.formContainer}>
              <TextInput
                style={styles.input}
                placeholder="ID"
                placeholderTextColor="rgba(255,255,255,0.7)"
                value={this.state.id}
                onChangeText={this.handleRequestId}
                returnKeyType="go"
                // onSubmitEditing={this.setState.status}
                keyboardType="default"
                autoCapitalize="none"
                autoCorrect={false}
              />          
              <TextInput
                style={styles.input}
                placeholder="Cod"
                placeholderTextColor="rgba(255,255,255,0.7)"
                value={this.state.codigo}
                onChangeText={this.handleRequestCod}
                returnKeyType="go"
                // onSubmitEditing={this.setState.status}
                keyboardType="default"
                autoCapitalize="none"
                autoCorrect={false}
              />
              <TextInput
                style={styles.input}
                placeholder="Description"
                placeholderTextColor="rgba(255,255,255,0.7)"
                value={this.state.descricao}
                onChangeText={this.handleRequestDescription}
                returnKeyType="go"
                // onSubmitEditing={this.setState.status}
                keyboardType="default"
                autoCapitalize="none"
                autoCorrect={false}
              />
              <Button 
                style={styles.buttonContainer}
                onPress={this.pullRequest} 
                title="REQUEST"
                // color="#0sd0a2"
              />
              <View>
                <Text>\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/</Text>
              </View>
              <Button 
                style={styles.buttonContainer}
                onPress={this.postRequest} 
                title="POST"
                // color="#0sd0a2"
              />
            </View>
          </KeyboardAvoidingView>
        );
      }
    }
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-11 03:52:48

代码语言:javascript
复制
define initial state

constructor(props){
  super(props);
  state = {
    groups: []
  }
}

componentWillMount() { 
  **//once you fetch the data and updated the state like**
  this.setState({groups: results.group}) **// response**
}

in render

renderItem = ({item}) => {
  //how you need to view
}

render(){
  return(
    <FlatList
      data={this.state.grops} // you need to send array of objects
      renderItem={({item}) => this.renderItem}
    />
  );
}
票数 2
EN

Stack Overflow用户

发布于 2018-08-12 08:30:17

当您将groups作为一个状态为state = { groups: [] }的数组时,您可以将其初始化为一个数组。this.setState({groups: results.group})将使用您获得的值覆盖该数组。its不会将其添加到groups: []

您可以使用获得的数组对象初始化组,并对其执行map操作。我不确定你得到的内容的格式,但它可能像state = { groups: {map: [] }}或其他什么,这取决于你得到的是什么。或者,如果您想将值推入初始化的空数组,则可以执行.concat()

票数 2
EN

Stack Overflow用户

发布于 2018-08-11 05:03:05

失败的原因是您将groups定义为null,因此在第一次呈现时,它会尝试在null上调用"map“。应该用一个空数组来初始化它,而不是用null来初始化,这样就可以定义映射函数了。在您的组件中,fetch调用是异步的,因此在调用完成之前,一开始将不会显示任何数据。拥有一个空数组可以解决这种情况。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51792184

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档