如何使用 reactjs state 从数组中的项目访问数据？

Question

I am trying to get the data (id) from the main object inside an array that I GET from my Django-rest API.

I am going to use the id to pass it into a fetch url.

I have tried to use item.id but it doesn't get the id value.

This is the format of the array of the "task".

[
    {
        "title": "Task 4",
        "description": "Task 4",
        "video": "ad12312312",
        "done": false,
        "steps": [
            {
                "title": "Task 4 Task 1",
                "description": "Task 4 Task 1",
                "done": false,
                "task_id": 4,
                "id": 10
            },
            {
                "title": "Task 4 Task 2",
                "description": "Task 4 Task 2",
                "done": false,
                "task_id": 4,
                "id": 11
            },
            {
                "title": "Task 4 Task 3",
                "description": "Task 4 Task 3",
                "done": false,
                "task_id": 4,
                "id": 12
            }
        ],
        "id": 4
    }
]

class Screen extends Component {

  constructor() {
    super();
    this.state = {
      task: [],
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    fetch('https://url.com/daily-ecommerce/', {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxx`
      }
    })
    .then( res => res.json())
    .then( jsonRes => this.setState({ task: jsonRes }) )
    .catch( error => console.log(error))
    .then(console.log(this.state.task.id))
    fetch(`https://url.com/step/?task_id=${this.state.task.id}`, {
      method: 'GET',
      headers: {
        'Authorization': `Token xxxxx`
      }
    })

I need to access the ID of the task. (in this case, the "id":4)

Answer 1

You'd need to get the id in a callback from setState to ensure it has been set:

 componentDidMount() {
   AppState.addEventListener('change', this._handleAppStateChange);
   fetch('https://url.com/daily-ecommerce/', {
       method: 'GET',
       headers: {
         'Authorization': `Token xxxxx`
       }
     })
     .then(res => res.json())
     .then(jsonRes => this.setState({
       task: jsonRes
     }, () => {
       fetch(`https://url.com/step/?task_id=${this.state.task[0].id}`, {
         method: 'GET',
         headers: {
           'Authorization': `Token xxxxx`
         }
       })
     }))
     .catch(error => console.log(error))
 }

Another way would be to pass the id directly from the json response:

  componentDidMount() {
   AppState.addEventListener('change', this._handleAppStateChange);
   fetch('https://url.com/daily-ecommerce/', {
       method: 'GET',
       headers: {
         'Authorization': `Token xxxxx`
       }
     })
     .then(res => res.json())
     .then(jsonRes => {
       this.setState({
         task: jsonRes
       })
       fetch(`https://url.com/step/?task_id=${jsonRes[0].id}`, {
         method: 'GET',
         headers: {
           'Authorization': `Token xxxxx`
         }
       })
     })
     .catch(error => console.log(error))
 }