如何控制台對象內的日志對象

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()將獲得滿足條件的所有元素。