從JSON中的對象讀取數據

Question

我似乎無法弄清楚如何正確訪問和讀取此數據集。 我正在使用Django的REST API從后端提取一組數據。 該數據是我公司的一系列報價。 之后，它通過Redux傳遞到我的前端。 然后，我需要查看數組中的每個對象，檢查其“屬性”，並確定其中一個是否與用於搜索數據的文本字段的值匹配。

在嘗試訪問數據的不同方法的過程中，我已經用Google搜索了大約4個小時。 這包括將不同的級別傳遞給排序功能，並嘗試使用不同的方法訪問數據。

在React組件上方是此功能

function filterItems(arr, query) {
  console.log(arr);
  return arr.filter(function(el) {
    return el.quotename.toLowerCase().indexOf(query.toLowerCase()) > -1;
  });
}

組件內部

            <TableBody>
              {console.log(this.props.quotes[0])}
              {stableSort(
                this.state.searchval
                  ? filterItems(
                      this.props.quotes["attributes"],
                      this.state.searchval
                    )
                  : this.props.quotes,
                getSorting(order, orderBy)
              )
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                  const isSelected = this.isSelected(n);
                  return (
                    <TableRow
                      hover
                      onClick={event => this.handleClick(event, n)}
                      role="checkbox"
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.id}
                      selected={isSelected}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox checked={isSelected} />
                      </TableCell>
                      <TableCell component="th" scope="row" padding="none">
                        {n.attributes.quotenumber}
                      </TableCell>
                      <TableCell align="right">
                        {n.attributes.quotedate.split("T")[0]}
                      </TableCell>
                      <TableCell align="right">
                        {n.attributes.shipname}
                      </TableCell>
                      <TableCell align="right">
                        {n.attributes.quotecustomer}
                      </TableCell>
                      <TableCell align="right">
                        {n.attributes.quotecsr}
                      </TableCell>
                    </TableRow>
                  );
                })}

JSON數據樣本

{
  quotes: {
    quotes: [
      {
        type: 'quotes',
        id: '11451',
        attributes: {
          quotenumber: 'I want to compare this string',
          quotedate: '2019-02-11T14:41:01.777000Z',
          quotecustomer: '100217',
          quotecsr: null,
          shipname: 'name',
          shipstate: 'state',
          quoteuser: 'user',
          quotemultiplier: 1
        }
      },
      {
        type: 'quotes',
        id: '34711',
        attributes: {
          quotenumber: '021511-4',
          quotedate: '2018-12-10T14:15:58.297000Z',
          quotecustomer: '100217',
          quotecsr: null,
          shipname: 'name',
          shipstate: 'state',
          quoteuser: 'user',
          quotemultiplier: 1
        }
      },

我的狀態包含一個searchval成員，其中包含當前文本字段的值。 我需要過濾輸出數組以僅顯示其“ quotenumber”字段與該搜索匹配的對象。 出於某種原因，盡管控制台記錄日志中存在大量數組索引並具有屬性，但由於種種原因，它告訴我我的排序仍在嘗試訪問未定義的數據，這引起了很多問題。 在我這方面，可能只是愚蠢的誤解，即如何訪問對象的“屬性”部分。

Answer 1

您可以使用純js（而非jsx）的render方法進行過濾。 這樣，您可以使用局部（臨時）變量-調試起來容易得多-您可以在不同的步驟進行console.log記錄。

render() {
    const quotes = this.props.quotes["attributes"];
    const searchVal = this.state.searchval;
    const filtered = filterItems( quotes, searchVal );

    console.log( filtered );

    return (
      <TableBody>

使代碼適應您的需求（通過傳遞的道具）並檢查您正在處理的值，可能應該有

    const quotes = this.props.quotes["quotes"];
    console.log( quotes ); // should be an array

但是可以

    const quotes = this.props.quotes;

一切都取決於api的獲取，對子道具傳遞的尊重

當然，假設沒有數據就不會渲染此組件（由父對象）-沒有傳入未定義的prop。在這種情況下，有條件地渲染為null 。