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

Question

我正在尝试从我从 Django-rest API 获取的数组中的主对象中获取数据 (id)。我将使用 id 将它传递到一个 fetch url。我尝试使用 item.id 但它没有得到 id 值。这是“任务”数组的格式。[    {        "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`      }    })我需要访问任务的 ID。（在这种情况下，“id”：4）

Answer 1

您需要在回调中获取 idsetState以确保它已被设置：

 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))

 }

另一种方法是直接从 json 响应中传递 id：

  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))

 }