[英]React: Map an array inside object
I'm trying to show (in a select) the values of agenda that is an array inside an object.我试图显示(在选择中)作为 object 内的数组的议程值。
So what I would to obtain is a process like this: the user select a manager --> the user select the agenda values about this manager (this process in two different select).所以我要获得的是这样一个过程:用户 select 一个经理 --> 用户 select 关于这个经理的议程值(这个过程在两个不同的选择中)。
My problem is how to process the second choose in the render.我的问题是如何处理渲染中的第二个选择。
My object is like:我的 object 就像:
manager: [{…}]
0:
12:
name: "Name1"
surname: "Surname1"
agenda: Array(2)
0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
length: 2
__proto__: Array(0)
__proto__: Object
My code is:我的代码是:
handleChangeManager = (e) => {
const manager_id = e.target.value;
console.log("manager_id: ", manager_id)
this.setState({manager_id : manager_id})
this.agenda(manager_id)
}
// I have tried this to recover the agenda's information about the manager choosen.
agenda(manager_id)
{
let agendas = this.props.managers[0][manager_id].agenda
let mappingAgenda = agendas && agendas.length && agendas.map((agenda) => (
console.log(agenda.date)
))
}
render() {
let managers = this.props.managers
console.log("manager: ", managers)
<label>Manager</label>
<div className="bootstrap-select-wrapper">
<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
<option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
{managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
<option
key={k}
value={k}
name="manager_id" >
{v.name} {v.surname}
</option>
))}
</select>
// so there I should create a select about the agenda (for example allowing the user to choose the date)
How can I do to create a select about the data, after the manager is choosen?选择经理后,如何创建关于数据的 select?
You need to create another Select which will show you the options by populating it based on the selection of manager您需要创建另一个 Select ,它将根据管理器的选择通过填充它来显示选项
Also since the managers is an array, use managers.map
instead of Object.entries(manager).map
此外,由于管理器是一个数组,请使用 manager.map 而不是 Object.entries(
managers.map
Object.entries(manager).map
handleChangeManager = (e) => {
const manager_id = e.target.value;
console.log("manager_id: ", manager_id)
this.setState({manager_id : manager_id})
}
handleChangeAgenda = (e) => {
const manager = this.props.managers[0][this.state.manager_id];
const index = e.target.value
this.setState({agenda : manager.agendas[index]})
}
render() {
let managers = this.props.managers
console.log("manager: ", managers)
const manager_id = this.state.manager_id;
const selectedManager = manager_id? mangers[0][manger_id];
const agendas = (selectedManager || {}).agendas;
return (
<label>Manager</label>
<div className="bootstrap-select-wrapper">
<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
<option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
{managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
<option
key={k}
value={k}
name="manager_id" >
{v.name} {v.surname}
</option>
))}
</select>
<select title="Choose Agenda" onChange={(event) => this.handleChangeAgenda(event)}>
<option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
{agendas && agendas.map((v, index) => (
<option
key={k}
value={index}
name="manager_id" >
{v.start_at} - {v.end_at}
</option>
))}
</select>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.