Question

我正在尝试创建一个自动生成的表，其中包含可以单击的行。当用户单击该行时，将触发更改事件处理程序，该处理程序将在行中单击的数据复制到所选项的另一个表中。

列表生成正常，但是当我单击该行时，会出现错误： TypeError：that.state.orderlist.map不是函数

以下是反应组件代码：

import React from 'react';
import {Table} from 'react-bootstrap';

class OrderTable extends React.Component {
  render(){
    let that = this.props.that;
  return (
    <Table striped hover>
      <thead>
        <tr>
          <th>Id</th>
          <th>Food Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      {that.state.orderlist.map((name, index) =>
        <tr key={index} onClick={() => that.onResultClick(name)}><td>{name.id}</td><td>{name.fooditem}</td><td>{name.price}</td></tr>

      )}
      {console.log(JSON.stringify(that.state.orderlist))}
      </tbody>
  </Table>

  );
  }
}
export default OrderTable;

orderlist州代码如下：

this.state = {
              orderlist: [{id: '1', vegetable: 'kales', price: '20'},{id: '2', fooditem: 'cabbages', price: '20'}]

            };

然后将

OrderTable作为另一个组件中的一个组件调用，其中我有以下代码：

<OrderTable that={this}/>

Answer 1

关于这个奇怪的行为几个小时后，我的大脑震惊了，事实证明，除了事件处理程序：onResultClick正在改变orderlist的状态之外，map函数和一切正常。所以上面发布的代码没有问题。

显然，处理程序将state.orderlist的类型从数组更改为对象，方法是将其替换为对象而不是连接或推送：this.setState( {orderlist: data})而不是this.setState( {orderlist: this.state.orderlist.concat(data)}。通过将orderlist更改为对象（即{x：y}），地图功能无法访问。

任何有类似问题的人都应该看看他们对setState方法的实现。

在处理click事件时，使用map来自动生成具有map中的map的行会导致错误

1 个答案: