Question

我的状态是一个名为+------------+---------------------+ | sum(money) | created_at | +------------+---------------------+ | 100 | 2018-10-30 00:00:00 | | 300 | 2018-10-31 00:00:00 | +------------+---------------------+ 2 rows in set (0.00 sec)的数组，然后向我的服务器（即后端）发出axios post请求，然后尝试使用从服务器获得的响应来设置数组（联系人），然后将其显示在平面列表中，但始终会出现错误，提示contacts，这表示数组未按预期设置，请问我可能在做错什么

AXIOS请求

undefined is not an object (evaluating 'item.receiver.first_name')

来自服务器的响应

 componentDidMount() {
    const {params} = this.props.navigation.state;
    contact_id = 18;
        if(contact_id){
            console.log("mmm");
            console.log(contact_id);
            console.log("mmm");
            this.setState({loading: true});
            var bodyParameters = {
                id: contact_id,
            }
        /*    var config = {
                headers: {'Authorization': "Bearer " + this.state.token}
           };*/
           axios.post(
               'http://10.0.2.2:8000/api/contacts',
               bodyParameters,
         //      config
           ).then((response) => {
            this.setState({loading: false});
            console.log(response);   
            var len = response.data.success.length;
            for (let i = 0; i < len; i++) {
                let row = response.data.success;
                console.log(row);console.log(i);console.log("djdn")
                this.setState(prevState => ({
                    contacts: [...prevState.contacts, row],
                }), console.log(this.state.contacts));
            };
           }).catch((error) => {
            this.setState({loading: false});
                Alert.alert(
                    'Error',
                     'Internal Server Error, please try again later',
                    [
                      {text: 'OK'},
                    ],  );    
                    console.log(error); 
                   });    
        }
    }.bind(this), 100);
    }

状态和清单

 { data:
 { success:
  [ { id: 1,
      sender_id: 18,
      receiver_id: 3,
      last_message:
       { id: 1,
         message: 'books and books bro, no fear',
         created_at: '2018-09-05 09:13:01',
         updated_at: '2018-09-05 09:13:01',
         read: 0,
         sent: 0,
         user1: 3,
         user2: 18 },
      created_at: null,
      updated_at: null,
      receiver:
       { id: 3,
         user_name: 'Leke',
         email: 'leke@sele.com.ng',
         first_name: 'Leke',
         last_name: 'Doe',
         phone_no: '08109823438',
         image_url: null,
         birthday: '02/05/2030',
         gender: 'male',
         servicer: 1,
         rating: '5.0',
         school_id: 21,
         created_at: '2018-09-05 09:13:01',
         updated_at: '2018-09-12 14:44:40',
         provider: null,
         provider_id: null,
         job_title: null,
         profile_description: null } },
    { id: 2,
      sender_id: 18,
      receiver_id: 1,
      last_message:
       { id: 4,
         message: 'everything stew',
         created_at: '2018-09-05 09:13:02',
         updated_at: '2018-09-05 09:13:03',
         read: 0,
         sent: 0,
         user1: 1,
         user2: 18 },
      created_at: null,
      updated_at: null,
      receiver:
       { id: 1,
         user_name: 'Jane',
         email: 'jane@sele.com.ng',
         first_name: 'Jane',
         last_name: 'Doe',
         phone_no: '08109823487',
         image_url: null,
         birthday: '19/08/2018',
         gender: 'female',
         servicer: 1,
         rating: '3.0',
         school_id: 35,
         created_at: '2018-09-05 09:13:01',
         updated_at: '2018-09-05 09:13:01',
         provider: null,
         provider_id: null,
         job_title: null,
         profile_description: null } } ] },

错误

constructor(props) {
this.state = {
 contacts: [],
};
}
 const contacts = (
        <FlatList          
        data={this.state.contacts}          
        renderItem={({ item }) => ( 
            <TouchableNativeFeedback 
            onPress={() =>
                this.props.navigation.navigate('Chat', {}
            )}>
                    <View style={styles.chats}>
                <View style={styles.profiles}>
                    <Image resizeMode="contain" style={{alignSelf: 'center', flex: 1,}}
                           source={require('../teeth.png')}/>
                </View>

                <View style={styles.chatTexts}>
                    <Text style={styles.profileName}>
                        {item.receiver.first_name} {item.receiver.last_name}
                        {'\n'}{'\n'}
                        {item.last_message.read?<Text style={{fontSize: 12}}>
                            {item.last_message.message}
                        </Text>:<Text style={{fontSize: 12, color: '#ADA5A5'}}>
                            {item.last_message.message}
                        </Text>}
                    </Text>
                </View>
                <Text style={{fontSize: 12,
                    position: 'absolute',
                    right: '8.33%',fontFamily: 'mont-medium',
                    color: '#000',
                    textAlign: 'left',
                    marginTop: 14,}}>
                    12:15
       </Text>
            </View>
                    </TouchableNativeFeedback>          
         )}          
         keyExtractor={item => item.id}                       
        />            );

Answer 1

在componentDidMount方法之后调用render生命周期方法，如果我们在componentDidMount中设置状态，则它将重新呈现组件。

因此，您需要在item上添加一个空检查，因为第一次执行render方法时，处于状态的contacts是一个空数组。因此，它将引发错误。

在axios发布请求后未设置状态数组

1 个答案: