Question

请记住，我是本机和所有人员的新手，所以请期待一些愚蠢的代码。

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

即使使用componentDidMount（），它也会显示错误“ null不是对象”（评估“ 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}
    />
  );
}

Answer 2

当groups处于state = { groups: [] }状态时，将其初始化为数组。 this.setState({groups: results.group})将使用您获得的值覆盖该数组。它不会将其添加到groups: []中。

您可以使用获取的数组对象初始化组，然后map进行初始化。我不确定您所获得的格式，但是可能像state = { groups: {map: [] }}或其他取决于您所获得的格式。要么如果要将值推入初始化的空数组，可以执行.concat()。

Answer 3

失败的原因是您将groups定义为null，因此，第一次渲染时，它将尝试在null上调用“ map”。您应该使用一个空数组而不是null对其进行初始化，以便定义map函数。在您的组件中，fetch调用是异步的，因此在调用完成之前不会有任何数据显示。空数组可以解决这种情况。

如何显示<flatlist>上的fetch（）中的数组？

3 个答案: