如何在 reactstrap 列表项上显示来自 rest api 的值列表
How do I display the list of values from restapi on reactstrap list item
以下是我的代码:
import React, { Component, Fragment,useState } from "react";
import RestAPI from "services/api";
import { handleServerErrors } from "utils/errorHandler";
const options = {
colors: ["#aab5f0", "#99ccee", "#a0ddff", "#00ccff", "#00ccff", "#90c5f0"],
enableTooltip: true,
deterministic: true,
fontFamily: "arial",
fontSizes: [15, 60],
fontStyle: "normal",
fontWeight: "normal",
padding: 3,
rotations: 1,
rotationAngles: [0, 90],
scale: "sqrt",
spiral: "archimedean",
transitionDuration: 1000
};
class TestForm extends Component {
constructor(props){
super(props);
this.state={
items:[],
isLoaded:false,
key:"",
value:""
}
}
handleChange = (event) =>
this.setState({value: event.target.value});
componentDidMount(){
this.setState({ isLoding: true }, () => {
RestAPI.newForm()
.then((response) => {
let keywordArray = [];
for (let i = 0; i <= response.data.length; i++) {
keywordArray.push({
text: response.data[i].key,
});
}
if (response.data.length === 0) {
this.setState({
isData: false,
});
}
this.setState({
isLoding: false,
items: keywordArray,
});
})
.catch((error) => {
this.setState({ isLoding: false });
handleServerErrors(error, toast.error);
});
});
}
render() {
var {isLoaded,items} = this.state;
return (
<>
<div>
{items.map(item => {
return <li>{item[0]}</li>;
})}
</div>
</>
);
}
}
export default TestForm;
从其余 API,我得到以下列表作为数据:
["ant","build","code",...]
我希望每当我从下拉列表中选择一个选项时,此列表都显示在列表项下。这些值未显示,我还尝试在 changeEvenet 中而不是 ComponentdidMount() 中编写代码。即使那样它也不起作用。什么是可行的解决方案?
您使代码复杂化了,这是您如何提取数据的简单示例
class TestForm extends Component {
constructor(props){
super(props);
this.state={
items:[],
isLoaded:false,
}
}
componentDidMount(){
this.setState({isLoading: true})
RestAPI.newForm()
.then((response) => {
if(response && 'data' in response) {
this.setState({
items: response.data,
isLoading: false
})
}else {
this.setState({
isLoading: false,
})
}
})
});
}
render() {
var {isLoaded,items} = this.state;
return (
<div>
{items.map(item => <li>{item}</li>}
</div>
);
}
}
export default TestForm;
以下是我的代码:
import React, { Component, Fragment,useState } from "react";
import RestAPI from "services/api";
import { handleServerErrors } from "utils/errorHandler";
const options = {
colors: ["#aab5f0", "#99ccee", "#a0ddff", "#00ccff", "#00ccff", "#90c5f0"],
enableTooltip: true,
deterministic: true,
fontFamily: "arial",
fontSizes: [15, 60],
fontStyle: "normal",
fontWeight: "normal",
padding: 3,
rotations: 1,
rotationAngles: [0, 90],
scale: "sqrt",
spiral: "archimedean",
transitionDuration: 1000
};
class TestForm extends Component {
constructor(props){
super(props);
this.state={
items:[],
isLoaded:false,
key:"",
value:""
}
}
handleChange = (event) =>
this.setState({value: event.target.value});
componentDidMount(){
this.setState({ isLoding: true }, () => {
RestAPI.newForm()
.then((response) => {
let keywordArray = [];
for (let i = 0; i <= response.data.length; i++) {
keywordArray.push({
text: response.data[i].key,
});
}
if (response.data.length === 0) {
this.setState({
isData: false,
});
}
this.setState({
isLoding: false,
items: keywordArray,
});
})
.catch((error) => {
this.setState({ isLoding: false });
handleServerErrors(error, toast.error);
});
});
}
render() {
var {isLoaded,items} = this.state;
return (
<>
<div>
{items.map(item => {
return <li>{item[0]}</li>;
})}
</div>
</>
);
}
}
export default TestForm;
从其余 API,我得到以下列表作为数据:
["ant","build","code",...]
我希望每当我从下拉列表中选择一个选项时,此列表都显示在列表项下。这些值未显示,我还尝试在 changeEvenet 中而不是 ComponentdidMount() 中编写代码。即使那样它也不起作用。什么是可行的解决方案?
您使代码复杂化了,这是您如何提取数据的简单示例
class TestForm extends Component {
constructor(props){
super(props);
this.state={
items:[],
isLoaded:false,
}
}
componentDidMount(){
this.setState({isLoading: true})
RestAPI.newForm()
.then((response) => {
if(response && 'data' in response) {
this.setState({
items: response.data,
isLoading: false
})
}else {
this.setState({
isLoading: false,
})
}
})
});
}
render() {
var {isLoaded,items} = this.state;
return (
<div>
{items.map(item => <li>{item}</li>}
</div>
);
}
}
export default TestForm;