javascript - 我无法显示对象 Promise 的内容(反应)
问题描述
我是新来的反应,我有一个问题。当我在select中选择一个选项时,我想用innerHTML显示这个选项的数据。当我执行 console.log(data) 时,我从我的请求中获取数据。但是,在我的页面上,我得到 [object Promise] 或 [object Object] 而不是数据。几个星期以来我一直在做,但我做不到,请帮助我!
PS:对不起我的英语,我是法国人:)。
在这里,我在 jsx 中的代码:
import React from 'react';
import {Link} from "react-router-dom";
import axios from "axios";
import Select from "../../components/forms/Select";
class Persons extends React.Component {
constructor(props) {
super(props);
this.state = {
render: false,
error: null,
isLoaded: false,
persons: [],
person: [],
id: ''
};
//this.handleChange = this.handleChange.bind(this);
}
fetchPersons() {
return axios .get("'http://localhost:8000/api/persons")
//.then(res => res)
.then((result) => {
console.log("result: ",result);
this.setState({
isLoaded: true,
persons: result.data["hydra:member"]
})
}),
(error) => {
this.setState({
isLoaded: true,
error
})
console.log(error);
}
}
async fetchPerson(id) {
console.log(id);
try {
return await fetch("'http://localhost:8000/api/persons/" + id)
.then(res => res.json())
.then((result) => {
console.log("rr " + result); //object Object
this.setState({
isLoaded: true,
person: result.data
})
console.log("result1: ",result);
return result;
})
}catch(error) {
this.setState({
error
})
console.log("Erreur: ", error);
}
}
componentDidMount() {
this.fetchPersons();
}
handleChange = (event) => {
const show = document.getElementById("show");
console.log("I'm in handleChange");
const value = event.target.value;
let select = this.fetchPerson(value);
console.log("Select: " + select);
console.log("Select2: " , [select]);
console.log("Select: " + [{select}]);
console.log("Select2: " , [{select}]);
let newContent = "You selected " + JSON.stringify([{select}]);
show.innerHTML = newContent;
}
render() {
const {error, isLoaded, persons, person} = this.state;
if (error) {
return <div>Erreur : {error.message}</div>;
} else if (!isLoaded) {
return <div>Chargement…</div>;
} else {
return (
<div id="show">
<h1>Test</h1>
<Select id="selectPerson" name="persons" label="Persons" value={persons.id} onChange={this.handleChange.bind(this)}>
<option key={0} value={null}>Choice</option>
{this.state.persons && this.state.persons.map(person => (
<option key={person.id} value={person.id}>{person.ref} </option>
))}
</Select>
{this.state.persons && this.state.persons.map(person =>
<tr key={person.id}>
<td>{person.lname}</td>
<td>{person.fname}</td>
<td>{person.sexe}</td>
<td>{person.age}</td>
</tr>)}
</div>
)
}
}
};
export default Persons;
解决方案
您的 url 中有一个错误,并且fetch
失败,因此您转到不catch
返回任何内容的代码部分,因此由于该功能是async
您得到了一个承诺。
错误是'
在网址的开头
return await fetch("'http://localhost:8000/api/persons/" + id)
^
推荐阅读
- angular - 如何在应用程序中安排 1 个计时器 - 服务不是单例的?
- reactjs - 运行反应应用程序时的 RESULT_CODE_INVALID_CMDLINE_URL
- scala - Scala Circe 推断类
- assembly - 如果使用 Intel 语法,GAS 可以在非 Intel 系统上组装吗?
- angular - “对象”类型错误中不存在属性
- python - 无法理解:ValueError: Graph disconnected: cannot get value for tensor Tensor
- java - jconsole之类的java监控工具会强制垃圾回收吗?
- python - 如何从python程序执行python程序
- javascript - 为什么在 NodeJs 事件循环中从微任务移动到宏任务时事件循环未定义?
- json - 如何在 Django 中使用 RESTful API