React类组件中的Javascript“无法读取未定义的属性”

Question

简化我是新手，在渲染数据集时，出现错误“无法读取未定义的属性映射/0”（两个独立的，在代码中注释）。真正困扰我的是，当 dataSource（在 this.state 中）在类组件之外声明为 const 时，一切正常，但它没有作为 App 类的 state 属性。

function compare(a, b) {
  var n = -1, m = 0;
  if (a === "important") {n = 2;} else if (a === "normal") {n = 1;} else {n = 0;}
  if (b === "important") {m = 2;} else if (b === "normal") {m = 1;} else {m = 0;}
  return n - m;
}

class App extends React.Component {
  state = {
    dataSource: [
      {key: "1", title: "Call Uber eats w/o my parents", levels: ["important"]},
    ],
    count: 2,
  };

  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count, name: `Edward King ${count}`, age: 32, address: `London, Park Lane no. ${count}`
    };
    this.setState({dataSource: [...dataSource, newData], count: count + 1});
  };

  render() {
    const columns = [
      {
        title: "Level", dataIndex: "levels", key: "levels",
        sorter: (a, b) => compare(a.levels[0], b.levels[0]),            // cannot read property '0' of undefined
        render: levels => (
          <>
            {levels.map(level => {
              let color = "";                                           // cannot read property 'map' of undefined
              if (level === "important") {color = "red";}
              else if (level === "normal") {color = "blue";}
              return (
                <Tag color={color} key={level}>{level.toUpperCase()}</Tag>
              );
            })}
          </>
        )
      },
    ];
    return (
      <Button onClick={this.handleAdd} type="primary">Add a row</Button>    // Original call
    );
  }
}

我所知道的是，我必须以某种方式从此类的状态中检索数据以防止未定义的属性，但是当我将参数（不是实际对象）传递给函数时我感到困惑，它仍然引发了上述错误。

非常感谢。

编辑 这是返回函数的完整代码。这在第一次迭代中没有包含，现在包含（感谢编辑）。

<Row justify="center" align="top">
  <Col style={{ maxWidth: 1080 }}>
    <Space style={{ marginBottom: 16 }}>
      <Button onClick={this.handleAdd} type="primary">
        Add a row
      </Button>
      <Button onClick={this.clearFilters}>Clear filters</Button>
      <Button onClick={this.clearAll}>Clear filters and sorters</Button>
    </Space>
    <Table columns={columns} dataSource={this.state.dataSource}/>
  </Col>
</Row>

Answer 1

实际上，您是在直接访问levels 属性，该属性是state 中dataSource 数组中对象的一部分。这就是为什么它在levels 上给出未定义的错误。

在渲染中，先获取状态—— const levelsArr = this.state.dataSource[0].levels;

然后试试这个代码compare(a.levelsArr[0], b.levelsArr[0])

还有{levelsArr && levelsArr.map(level => {