android - 如何在 上显示来自 fetch() 的数组？

Question

请记住，我是 react-native 的新手，所以期待一些愚蠢的代码。

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

即使使用 componentDidMount() 也显示错误“null is not an object”(评估“this.state.groups.map”)

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

    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>
        );
      }
    }

Answer 1

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}
    />
  );
}