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。

从JSON中的对象读取数据

1 个答案: