Question

我正在尝试通过一些值进行映射，但是不断出现有关map函数的错误。当我尝试将const分配为等于状态时，它变得不确定。我已经在控制台中登录了状态，并获得了结果：

species: Array(3)
0: {species_ID: 1, species: "Dog"}
1: {species_ID: 2, species: "Cat"}
2: {species_ID: 3, species: "Hamster"}
length: 3

但是当我尝试在render方法中将其分配给const时，登录控制台会给我未定义的信息。

我尝试直接在map方法中映射状态以避免此步骤，但是遇到关于map不是函数的错误。

{this.state.species && this.state.species.map (speciestype => {
                        return (
                        <option key={speciestype.species_ID} value={speciestype.species_ID}>
                            {speciestype.species}
                        </option>
                    )}
                    )}

这是当前代码的样子：

render() {
   const {speciesdata} = this.state.species; 
   console.log(speciesdata);
    return (

我的地图函数如下：

{speciesdata && speciesdata.map (speciestype => {
                        return (
                        <option key={speciestype.species_ID} value={speciestype.species_ID}>
                            {speciestype.species}
                        </option>
                    )}
                    )}

但是由于种类数据未定义（根据控制台），因此下拉列表为空。

为什么我不能将种类数据分配给我知道的状态？

Answer 1

此：

const {speciesdata} = this.state.species;

将不起作用，因为this.state.species不包含任何称为speciesdata的对象。您应该这样做：

const { species } = this.state;

或者这个：

const speciesdata = [...this.state.species];

然后尝试以这种方式重新绘制地图，使其不仅检查是否存在，而且还检查种类是否为数组：

{
  species && 
  species.length &&
  species.map(speciestype => (
   <option key={speciestype.species_ID} value={speciestype.species_ID}>
      {speciestype.species}
   </option>
  ))
}

Answer 2

LiJonas用以下代码回答了这个问题：

此：

const {speciesdata} = this.state.species;

将不起作用，因为this.state.species不包含任何称为物种数据的对象。您应该这样做：

const { species } = this.state;

或者这个：

const speciesdata = [...this.state.species];

然后尝试以这种方式重新绘制地图，使其不仅检查是否存在，而且还检查种类是否为数组：

{
  species && 
  species.length &&
  species.map(speciestype => (
   <option key={speciestype.species_ID} value={speciestype.species_ID}>
      {speciestype.species}
   </option>
  ))
}

无法将const分配给状态值，返回未定义

2 个答案: