Ошибка TypeScript: необработанное отклонение обещания после попытки опубликовать данные

Question

Я создал кнопку «Добавить поле» внутри плоского списка, который публикует данные в бэкэнд, однако, когда я пытаюсь опубликовать его, возникает ошибка «Необработанный отказ от обещания».

Моя функция добавления поля выглядит следующим образом:

margin = () => {

    let data = {
        method: 'POST',
        body: JSON.stringify({
            margin: this.state.margin,

        }),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    }
    console.log(data)
    this.setState({
        isLoading: true,

    })



    return fetch('some url',item._id )
            .then((response) => response.text())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    data: responseJson.data,
                });
                console.log(JSON.stringify(responseJson));
            })

}

Я вызвал вышеупомянутую функцию следующим образом:

<TextInput value={this.state.margin}   onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
        <TouchableHighlight onPress={this.margin}>
        <Text>Add Margin </Text> 
        </TouchableHighlight>

После нажатия на Добавить поле мои журналы:

 {"body": "{\"margin\":\"76\"}", "headers": {"Accept": "application/json", "Content-Type": "application/json"}, "method": "POST"}
 WARN  Possible Unhandled Promise Rejection (id: 3):
TypeError: undefined is not an object (evaluating 'this.state.data.product')
render
finishClassComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:17804:43
updateClassComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:17767:50
invokeGuardedCallbackImpl@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:9044:21
invokeGuardedCallback@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:9140:42
beginWork$$1@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:23261:34
performUnitOfWork@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22399:30
workLoopSync@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22381:45
renderRoot@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:22145:29
renderRoot@[native code]
runRootCallback@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:21906:34
runRootCallback@[native code]
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:12636:38
unstable_runWithPriority@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:42642:30
flushSyncCallbackQueueImpl@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:12631:28
flushSyncCallbackQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:12620:35
scheduleUpdateOnFiber@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:21788:37
enqueueSetState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:14189:23
setState@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:4647:37

tryCallOne@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27029:16
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:27130:27
_callTimer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:30584:17
_callImmediatesPass@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:30620:19
callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:30839:33
callImmediates@[native code]
__callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2627:35
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2404:34
__guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2610:15
flushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2403:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

Пожалуйста, помогите, и укажите мне, что я делаю что-то не так, дайте мне знать, если вам нужно что-то еще.

Мой метод рендеринга следующий:

 render() {

    const ViewportAwareVideo = Viewport.Aware(Video);

    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, padding: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View >
         <StatusBar hidden />
        <TouchableOpacity
        onPress={() => this.props.navigation.navigate('Cart')}
    style={{
        position: 'absolute',
        top:10,
        right:80,
        zIndex:100
    }}>

    <Icon
        name="shopping-cart"
        size={24}
        style={{ paddingLeft: 60}}
        color="white"
    />

</TouchableOpacity>
<TouchableOpacity
    style={{
        position: 'absolute',
        top:10,
        right:20,
        zIndex:100
    }}
    onPress={() => this.props.navigation.navigate('User')}
    >
    <Icon
        name="user-circle"
        size={24}
        style={{ paddingLeft: 20 }}
        color="white"
    />
</TouchableOpacity>


        <SwiperFlatList

        initialNumToRender={1}
        vertical={this.state.vertical}
        index={0}

        data={this.state.data.product}

        scrollEventThrottle={1}
        onEndThreshold={0}
        renderItem={({ item }) => (
        <View style = {{alignContent: 'stretch'}} >
          <View>
            <ScrollView >
    <GestureRecognizer 
    onSwipeLeft={this.onSwipeLeft}/>
            <ViewportAwareVideo
          repeat paused={this.state.videoPaused}
          source={{ uri: item.urlVid }}
          resizeMode = "cover"
          preTriggerRatio={PRE_TRIGGER_RATIO} 
          retainOnceInViewport={false}  
          style={{width: width, height:height}}
          innerRef={ref => this._videoRef = ref}
          onViewportEnter={() => this._videoRef.play()}
          onViewportLeave={() => this._videoRef.stop()} 
        />


   </ScrollView>
   </View>

         <View
              style={{
                position: 'absolute',
                flexDirection: 'column',
                alignItems: 'flex-end',
                top: '50%',
                right: 10,
              }}>
              <TouchableOpacity
                 onPress= {() => this.onButtonPress(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}

                />
                <Modal
             style={{flex:1,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: (Platform.OS == 'android') ? 20 : 0}}   
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose = {() => { this.props.navigation.navigate('Home'), console.log('closed') } }>

            <View>

        <Text>{item.title} - {item.price}</Text>
        <TextInput value={this.state.margin}   onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
        <TouchableHighlight onPress={this.margin}>
        <Text>Add Margin </Text> 
        </TouchableHighlight>
        {/* <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}> */}
                  {/* <TouchableHighlight onPress={()=>{this.props.navigation.navigate('Home')}}> 
                  <Text>Go Back</Text></TouchableHighlight> */}

              {/* </TouchableHighlight> */}
              </View>
              </Modal>
              </TouchableOpacity>


              <TouchableOpacity
                onPress={()=>this.shareProduct(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="share" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="whatsapp" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
              onPress= {() => this.download(item)}
                style={{
                  alignItems: 'center',
                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="download" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
            </View>
            <View
              style={{
                position: 'absolute',
                flexDirection: 'column',

                top: '90%',
                left: 10,
              }}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
                <View
                style={{
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
                  {item.title} - {item.price}
                </Text>



              </View>
                </TouchableOpacity>


            </View>

        </View> 


        )}

        keyExtractor={ item => item._id}
      />

      </View>
    );
  }


   }
  //  AppRegistry.registerComponent('homePage',()=> homePage);
   export default withNavigationFocus(Videos)