React：オブジェクトを更新した後、オブジェクト内の配列が置換されない

Question

オブジェクトfirstOccurrenceに配列extrasが含まれています。これは最初は空の配列に設定されています。次に、AJAXリクエストを行い、配列全体が置換されずに空であることを除いて正常に動作するオブジェクトfirstOccurrence全体を置き換えます。

アレイを含むオブジェクト全体をどのように置き換えることができますか？

import React, { Component } from 'react'; 
import { StyleSheet, View, Text } from 'react-native'; 
import axios from 'axios'; 

export default class Job extends Component { 
    state = { 
    firstOccurrence: { 
     customer: {}, 
     job: {}, 
     extras: [] 
    } 
    }; 

    componentWillMount() { 
    axios.get(
     `http://api.test.dev:5000/jobs/1.json`, 
     { 
     headers: { Authorization: 'Token token=123' } 
     } 
    ).then(response => { 
     console.log(response.data); 
     this.setState({ 
     firstOccurrence: response.data 
     }) 
    }); 
    } 

    render() { 
    return (
     <View> 
     <View> 
      <Text>{this.state.firstOccurrence.customer.firstName} {this.state.firstOccurrence.customer.lastName}</Text> 
     </View> 
     {this.state.firstOccurrence.extras.length > 0 && 
      <View> 
      <Text>Extras: {this.state.firstOccurrence.extras}</Text> 
      </View> 
     } 
     </View> 
    ); 
    } 
} 

JSONレスポンス：

Answer 1

あなたが代わりにコンストラクタの機能componentDidMountにリクエストを行う必要があります

constructor() { 
    super(); 

    this.state = { 
     firstOccurrence: { 
     customer: {}, 
     job: {}, 
     extras: [] 
     } 
    }; 
} 

    componentDidMount(){ 
    axios.get(
     `http://api.test.dev:5000/crew/v1/jobs/1.json`   
    ).then(response => {this.setState({ 
     firstOccurrence: response.data 
    })}); 
    } 

それはwill be called when the component is mounted、あなたが設定できるようになりますその状態が再描画をトリガーします。 firstOccurrenceには、最初のレンダリングでコンストラクタで設定した初期値があり、API呼び出しが完了して新しい値が設定されると、コンポーネントが再レンダリングされることに注意してください。