reactjs - 为什么 TypeError: Can't read undefined'map' 属性？

Question

容器.js

class PatientListContainerNew extends Component {
  
  state = {
    limit: 7,
    file: {
      info: null,
      base64: null,
    },
    data: [],
    filteredData: [],
    columns: [],
    searchInput: "",
  };

  componentDidMount() {
    this.getData();
    this.getColumns();
    console.log("========componentDidMount====== ");
    const { getPatient, loadingTrue } = this.props;
    loadingTrue();
    setTimeout(() => {
      getPatient();
    }, 500);
  }
  

  ... code skip


getData = () => {
  const originData = this.props.results;
  const data = this.props.results.map((datum) => ({...datum, id: datum.id, name: datum.name}));
  this.setState({ data, filteredData: data });
};

handleSetData = data => {
  console.log(data);
  this.setState({ filteredData: data });
};


  render() {
  const { filteredData, columns } = this.state;
    return (
      <div>
        <PatientSearch
          data={this.state.data}
          handleSetData={this.handleSetData}
        />
        <List
          columns={columns}
          originData={filteredData}
          limit={this.state.limit}
        />
        <input />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  results: state.patient.results,
});

错误代码

TypeError: Cannot read property 'map' of undefined
PatientListContainerNew.getData
D:/src/containers/patient/Container.js:346
  343 | 
  344 |    getData = () => {
  345 |      const originData = this.props.results;
> 346 |      const data = originData.map((datum) => ({...datum, id: datum.pid, name: datum.pid}));
      | ^  347 |      this.setState({ data, filteredData: data });
  348 |    };
  349 | 

origindata 保存数据库中的数据。

想知道为什么会出现地图错误。我很困惑如何使用地图功能。我想我用错了。如果您让我们知道如何正确使用它，我们将不胜感激。

如有必要，我将添加更多代码。

感谢所有回答的人。

添加照片

标签： reactjsdictionary

Answer 1

您可能无法获得预期的数据。解决此问题的一种方法是使用构造函数在状态下提供空数据集：

class PatientListContainerNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      originData = this.props.results || [];
      ...
    }
  }
}

然后您可以在 this.state.originData 上工作而不会发生错误。