在遍歷數組對象以創建列表項時遇到麻煩

Question

我能夠遍歷JSON數據來創建一個填充數字的數組，但是當我創建列表項時，它不起作用。 該組件僅呈現一個空列表。

當我在map函數之前console.log（ticketNumbers）時，它顯示為折疊的Array []，直到我展開它為止（然后顯示所有值）

function apiCall() {
  var ticketNumbers = [];
  var memId = 'xxx'; 
  var myInit = { 
      method: 'GET',
      mode: 'cors',
      headers: {
        'authorization': "xxx",
    'Access-Control-Allow-Origin':'*',
    'content-type': "application/json",
    'cache-control': "no-cache"
          },
      params: {
    'orderBy': 'status/name asc',
    'pageSize': 300,
    'conditions': "resources contains '" + memId + "' AND status/id not in (17,165,36,163,164,42,73,46,78,148,34,132,45,159,60,168,106,51,72,95)"
          }
  };
  axios.get('Url', myInit)
    .then((response) => {
      console.log(response.data)
      for (var ticket in response.data) {
        ticketNumbers.push(response.data[ticket].id)
      };  
     })
    return ticketNumbers
}
class TicketContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      loading: true,
    };
  }
  componentWillMount() {
      this.setState({
        data: {
      numbers: apiCall()
        },      
      loading: false
        })
      };
  render() {
    return(
      <div>
    {this.state.loading ? 'Loading' : <Tickets data={this.state.data} />}
      </div>
    )
  }
}

class Tickets extends Component {
  render() {
    const stuff = this.props;
    var ticketList = stuff.data.numbers;
    console.log(ticketList);
    return(
      <div>
        <ul>Ticket Number
          {ticketList.map((ticket, index) => {
            return <li key={index}>sweet</li>;
          })}   
        </ul>
      </div>
    );
  }
}

Answer 1

您應該正確使用Promise解決此問題。 首先，讓我們更改apiCall，使其返回Promise：

function apiCall() {
  var ticketNumbers = [];
  var memId = 'xxx'; 
  var myInit = { 
      method: 'GET',
      mode: 'cors',
      headers: {
        'authorization': "xxx",
    'Access-Control-Allow-Origin':'*',
    'content-type': "application/json",
    'cache-control': "no-cache"
          },
      params: {
    'orderBy': 'status/name asc',
    'pageSize': 300,
    'conditions': "resources contains '" + memId + "' AND status/id not in (17,165,36,163,164,42,73,46,78,148,34,132,45,159,60,168,106,51,72,95)"
          }
  };
  return axios.get('Url', myInit)
    .then((response) => {
      console.log(response.data)
      for (var ticket in response.data) {
        ticketNumbers.push(response.data[ticket].id)
      }
      return ticketNumbers;
     });
}

您知道有一個基於Promise的api，可以這樣使用：

apiCall().then(ticketNumbers => console.log(ticketNumbers);

我們只需要修改componentWillMount就知道：

componentWillMount() {
     apiCall().then(numbers => this.setState({ loading: false, data: numbers });
}

Answer 2

apiCall函數調用一個異步過程的API，並且從函數請求返回ticketNumbers 不會返回結果，因為return語句將在API響應准備好並填充ticketNumbers數組之前執行。

最簡單的方法是在React類中定義此函數，然后在axios請求的回調中直接設置setState 。

class TicketContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      loading: true,
    };
  }
  componentWillMount() {
      this.apiCall()

  };


  apiCall =() => {

      var memId = 'xxx'; 
      var myInit = { 
          method: 'GET',
          mode: 'cors',
          headers: {
            'authorization': "xxx",
            'Access-Control-Allow-Origin':'*',
            'content-type': "application/json",
            'cache-control': "no-cache"
          },
          params: {
            'orderBy': 'status/name asc',
            'pageSize': 300,
            'conditions': "resources contains '" + memId + "' AND status/id not in (17,165,36,163,164,42,73,46,78,148,34,132,45,159,60,168,106,51,72,95)"
              }
      };
      axios.get('Url', myInit)
        .then((response) => {
          var ticketNumbers = [];
          for (var ticket in response.data) {
            ticketNumbers.push(response.data[ticket].id)
          }; 
          this.setState({data: ticketNumbers, loading: false}) 
         })
  }
  render() {
    return(
      <div>
    {this.state.loading ? 'Loading' : <Tickets data={this.state.data} />}
      </div>
    )
  }
}

class Tickets extends Component {
  render() {
    const stuff = this.props;
    var ticketList = stuff.data.numbers;
    console.log(ticketList);
    return(
      <div>
        <ul>Ticket Number
          {ticketList.map((ticket, index) => {
            return <li key={index}>sweet</li>;
          })}   
        </ul>
      </div>
    );
  }
}

如果您想知道console.log（）語句為何記錄該數組，請檢查此答案剛剛在JavaScript對象中評估了下面的值