Javascript 如何在数组中找到对象并在React组件中显示它？

我有一系列的城市，对象如下：

[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]

我的值是id

我将数组中的元素（名称）放入选择列表。但我需要添加第一个选项，该选项的值来自数组（name），该数组具有相应的id，我无法使其工作

我的组成部分：

const propTypes = {  
  cities: PropTypes.array,  
  enteredEvent: PropTypes.array  
};

class newEvent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showInOption: ''
    };
    this.handleDictionary = this.handleDictionary.bind(this);
    this.searchTypeEvent = this.searchTypeEvent.bind(this);
  }

  componentDidMount() {
    this.searchTypeEvent();
  }

  handleDictionary(e) {
    ...
  }

  searchTypeEvent() {
    if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
      const type = this.props.cities.find(el => el.id === this.props.enteredEvent.cityid); // find an object with id
      this.setState({ showInOption: type.name });
    }
    this.setState({ showInOption: 'Select something' });
  }

  render() {
    return (
      <div>       
        <select onChange={this.handleDictionary}>
          <option>{this.state.showInOption}</option> // here I need to add a value
          {this.props.cities.map(item => {   // here I call other options
            return (<InputSelect key={item.id} directory={item}/>);
          })}
        </select>        
      </div>
    );
  }
}

constproptypes={
城市：PropTypes.array，
enteredEvent:PropTypes.array
};
类newEvent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
显示操作：“”
};
this.handleDictionary=this.handleDictionary.bind（this）；
this.searchTypeEvent=this.searchTypeEvent.bind（this）；
}
componentDidMount（）{
this.searchTypeEvent（）；
}
手写词典（e）{
...
}
searchTypeEvent（）{
如果（this.props.enteredEvent.cityid！==null&&this.props.enteredEvent.cityid！==未定义）{//如果我有id值
const type=this.props.cities.find（el=>el.id==this.props.enteredEvent.cityid）；//查找id为的对象
this.setState（{showInOption:type.name}）；
}
this.setState（{showInOption:'Select something'}）；
}
render（）{
返回(
{this.state.showInOption}//这里我需要添加一个值
{this.props.cities.map（item=>{//这里我调用其他选项
返回（）；
})}
);
}
}

我有一个错误：

未捕获的TypeError:无法读取未定义的属性“name”

我如何修复它？

试试这个

  const type = Array.isArray(this.props.cities) && this.props.cities.find(el => el.id ==this.props.enteredEvent.cityid);
  this.setState({ showInOption: type ? type.name : null });

确保您输入的名称与数组中的任何一个对象匹配，它将返回一个对象数组

a=[{
id:1，
姓名：“纽约”
}, {
id:2，
姓名：“伦敦”
}]
功能b（idToSearch）{
返回a.filter（项=>{
return item.id==idToSearch
})
};
console.log（b（1））

您试图通过查看ID通过搜索词查找项目，这是有意的吗

el.id==this.props.enteredEvent.cityname

。在尝试访问

名称

之前，还必须确保确实找到了

类型

。不知道什么是

cityname

。如果它来自一个输入，那么它不太可能是一个可以通过检查的数字。@Tholle this.props.enteredEvent.cityid是正确的。我在邮寄中的错误。我得到了我需要的对象（在找到之后），但我无法得到它的名称value@estus此.props.enteredEvent.cityid是正确的。postWrite

console.log（type）中的错误紧跟在
查找
之后，您将得到
未定义
，如错误所示。我认为最好防止
cityid
与
cities
对象id不匹配的情况。我需要打印名称值。我该怎么做呢？当我从option调用这个函数时，在函数中我返回值，这个函数调用了6次，在最后一次调用中我得到了对象值（我使用console.log捕获它）。也许React没有时间执行此功能？不，这对我的工作没有帮助。我认为异步反应问题对我来说是完美的！非常感谢！正是我想要的！！：）