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

debugcn 发表于 Dev

9分钟

我正在尝试从我从Django-rest API获取的数组中的主对象中获取数据（id）。

我将使用ID将其传递到获取网址。

我尝试使用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）

明晰

您需要在回调中获取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))
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。