如何控制台对象内的日志对象

Question

我有一个渲染自定义行的 React 组件，我想要做的是将对象放入 id:2 和 name:Guy Wooten 的对象中：

https://imgur.com/a/VjYQBMo

我试过

props.dataItem.employees[0]

还有：

props.dataItem.employees.id

因为它在一个数组内，但它没有用。 如何获取 id 为 2 的对象？ 这是我的 console.logs 数据的函数代码：

 const rowRender = (row, props) =>
  console.log(props.dataItem.employees) ? (
      <row.type {...row.props} className={row.props.className + ' myClass'} />
    ) : (
      row
    );

这是一个可运行的示例 console.loging 数据：

https://stackblitz.com/edit/react-ccskl5-re3ntv?file=app/main.jsx

这是整个代码：

const App = () => {
  const [state, setState] = React.useState({
    data: [...employees],
    expanded: [],
  });

  const processData = () => {
    const data = addExpandField(state.data);
    const result = mapTree(data, subItemsField, aggregateSubItems);
    return aggregateSubItems({
      [subItemsField]: result,
    })[subItemsField];
  };

  const aggregateSubItems = (item) => {
    const subItems = item[subItemsField];

    if (subItems && subItems.length) {
      const lastHireDate = subItems.reduce(
        (acc, curr) => Math.max(acc, curr.hireDate, curr.lastHireDate || acc),
        new Date(0)
      );
      const date = new Date(lastHireDate);
      const year = new Intl.DateTimeFormat('en', {
        year: 'numeric',
      }).format(date);
      const month = new Intl.DateTimeFormat('en', {
        month: 'long',
      }).format(date);
      const day = new Intl.DateTimeFormat('en', {
        day: '2-digit',
      }).format(date);
      const hireDateString = `Last employee hired on ${month} ${day}, ${year}`;
      const employeesCount = subItems.reduce(
        (acc, curr) => acc + (curr.employeesCount || 0) + 1,
        0
      );
      const aggregateItem = {
        footer: true,
        name: `${employeesCount} employee(s)`,
        hireDate: hireDateString,
      };
      return extendDataItem(item, subItemsField, {
        employeesCount,
        lastHireDate,
        [subItemsField]: [...subItems, aggregateItem],
      });
    }

    return item;
  };

  const rowRender = (row, props) =>
    console.log(props.dataItem.employees) ? (
      <row.type {...row.props} className={row.props.className + ' myClass'} />
    ) : (
      row
    );

  const onExpandChange = (event) => {
    setState({
      ...state,
      expanded: event.value
        ? state.expanded.filter((id) => id !== event.dataItem.id)
        : [...state.expanded, event.dataItem.id],
    });
  };

  const addExpandField = (dataArr) => {
    const expanded = state.expanded;
    return mapTree(dataArr, subItemsField, (item) =>
      extendDataItem(item, subItemsField, {
        expanded: expanded.includes(item.id),
      })
    );
  };

  return (
    <TreeList
      style={{
        maxHeight: '430px',
        overflow: 'auto',
        width: '100%',
      }}
      expandField={expandField}
      subItemsField={subItemsField}
      onExpandChange={onExpandChange}
      data={processData()}
      columns={columns}
      rowRender={rowRender}
    />
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Answer 1

Kendo TreeList的rowRender属性在一行即将被渲染时触发，在您的情况下意味着 2 次（一次用于数据集的 Daryl Sweeney，一次用于页脚行）。

在您的函数rowRender （我会更改名称，因为它在 TreeList 的属性和您的函数之间造成混淆），您检查props.dataItem.employees ，但页脚行没有employees键。

因此，对于第一行，您的代码：

props.dataItem.employees[0]

是正确的，我认为它可以正常工作，但是由于该功能被第二次触发，如果您尝试读取employees密钥，它将无法正常工作，并且会向您抛出错误。

在访问您的employees的第一项之前，请确保密钥存在：

if (props.dataItem && props.dataItem.employees) {
    // do what you need to do here
    // console.log(props.dataItem.employees[0]);
}

此外，除非我 100% 确定第一个项目确实是 Guy Wooten，否则我不会直接读取employees[0] 。 我会这样做：

if (props.dataItem && props.dataItem.employees) {
    // this code doesn't typecheck 'employees' and assumes employees is an array
    const guyWooten = props.dataItem.employees.filter(item => item.id === 2);
    // the filter methods returns an array, you can also use Array.prototype.find
    console.log(guyWooten[0]);

}

请记住， array.find()将找到第一个元素，而array.filter()将获得满足条件的所有元素。