如何添加两个map()函数(bind)并显示到页面中?关于调用两个地图的问题

Question

在reactjs中，如何添加两个map()函数(bind)并显示到页面中?在reactjs中调用两个map面临的问题

import React from "react";
import Select from "react-select";
export default class Sampletest extends React.Component {
constructor(props) {
super(props);
this.state = {


years: {
options: [
{ value: '2021', label: '2021' },
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
],
value: null
},
categories: {
options: [
{ value: '0', label: 'Incomplete' },
{ value: '1', label: '80G' },
{ value: '2', label: '80G' },
{ value: '3', label: 'Sports' },
{ value: '4', label: 'Social welfare' },
{ value: '5', label: 'Professional' },
{ value: '6', label: 'Health' },
{ value: '7', label: 'Food and Nutrition' },
{ value: '8', label: 'Education' }
],
value: null
},

Activity: {
options: [
{ value: '0', label :'My Causes'},
{ value: '1', label :'Liked Causes'},
{ value: '2', label :'Commented Causes'},
{ value: '3', label :'Pledged Causes'}
],
value: null
}  ,
// Details:[]
};
}
onSelectChange(name, value) {
this.setState(
(prev) => {
return {
...prev,
[name]: {
...prev[name],
value: value.value
}
};
},
() => {

let url =
"http://localhost:88888/api/GetProfile/Get_MyPostDetails?id=" +
this.state.Activity.value + "&Year=" +
this.state.years.value +
"&CategoryID=" +
this.state.categories.value

;
let user = JSON.parse(localStorage.getItem("user"));
const accessToken = user;
console.log(accessToken);
//console.log("hi");
fetch(url, {
method: "GET",
headers: {
"Content-type": "application/json",
Accept: "application/json",
Authorization: "Bearer " + accessToken,
"Access-Control-Allow-Headers": "Access-Control-Request-Headers "
}
//body:JSON.stringify(data)
})
.then((response) => response.json())
.then((data) => {
this.setState({
Details: data
});
console.log("Filter", data);
// console.log(emps.profile_dateOfAnniversary);
});
}
);
}

render() {
const {Details} = this.state;
return (

<div>

{Object.keys(this.state).map((name, i) => {
return (
<Select
key={i}
placeholder={name}
options={this.state[name].options}
onChange={this.onSelectChange.bind(this, name)}
/>
);
})}


{Details.map(emp => (
<div> 

<div>{emp.profile_name} </div>
</div>
))}    

</div>
);
}
}

当编译这段代码时，面临的问题是——>TypeError: Cannot read properties of undefined (reading 'map').

我已经添加了我的代码，我们需要在程序中添加map方法用于输出，我已经使用这个类组件并将这个页面调用到另一个页面，并将对象显示到对象数组中。

Answer 1

在声明状态时将Details初始化为Array。它在安装面上是未定义的，所以你会得到错误然后检查你得到的响应是否为数组