[英]How to iterate over a object that is returned asynchronously and display it in react.js?
Im having trouble with displaying the results of the function call await toxic("a toxic sentence").我在显示 function 调用 await toxic("a toxic sentence") 的结果时遇到了问题。 The closest i could get was to see this update in the state of the component in react plugin however it did not update the component itself.
我能得到的最接近的是在 React 插件的组件的 state 中看到这个更新,但是它没有更新组件本身。
function ToxicLabels(theObject) {
return (
<h2>{theObject.label} match {theObject.results[0].match}</h2>
)
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
objects: [],
}
}
componentDidMount() {
this.renderThePost()
}
componentDidUpdate(){
render()
}
renderThePost = async () => {
try {
let response = await toxic('you suck')
this.setState({
object: response,
})
// this.state.object.map((object)=>{
// console.log(object)
// ToxicLabels(object)
// })
}catch (err) {
console.log(err)
}
}
render() {
return (
<div>
<h2>Hello {"Hola"}</h2>
{this.state.object.map((object)=> {
console.log(object)
ToxicLabels(object)
})}
</div>
)
}
}
The Structure of data returned.返回的数据结构。 This is how TensorFlow's toxicity model returns data.
TensorFlow 的 toxicity model 是这样返回数据的。 There is 7 objects in the array.
数组中有 7 个对象。 Inside the each object there is a label and an array of results which shows the match(true or false) and the probabilities.
在每个 object 中有一个 label 和一个显示匹配(真或假)和概率的结果数组。
{
"object": [
{
"label": "identity_attack",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "insult",
"results": [
"{match: true, probabilities: Float32Array(2)}"
]
},
{
"label": "obscene",
"results": [
"{match: null, probabilities: Float32Array(2)}"
]
},
{
"label": "severe_toxicity",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "sexual_explicit",
"results": [
"{match: null, probabilities: Float32Array(2)}"
]
},
{
"label": "threat",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "toxicity",
"results": [
"{match: true, probabilities: Float32Array(2)}"
]
}
]
}
This code works form me, just exclude the toxic function and use your own.此代码适用于我,只需排除有毒的 function 并使用您自己的代码。
import React from "react"
const toxic = () => {
return {
"object": [
{
"label": "identity_attack",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "insult",
"results": [
"{match: true, probabilities: Float32Array(2)}"
]
},
{
"label": "obscene",
"results": [
"{match: null, probabilities: Float32Array(2)}"
]
},
{
"label": "severe_toxicity",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "sexual_explicit",
"results": [
"{match: null, probabilities: Float32Array(2)}"
]
},
{
"label": "threat",
"results": [
"{match: false, probabilities: Float32Array(2)}"
]
},
{
"label": "toxicity",
"results": [
"{match: true, probabilities: Float32Array(2)}"
]
}
]
}
}
function ToxicLabels(theObject) {
return (
<h2>{theObject.label} match {theObject.results[0].match}</h2>
)
}
export default class App extends React.Component {
constructor() {
super()
this.state = {
render: false,
objects: [],
}
}
componentDidMount() {
this.renderThePost()
}
componentDidUpdate(){
this.render()
}
renderThePost = async () => {
try {
let response = await toxic('you suck')
console.log( response )
this.setState({
objects: response.object,
render: true
})
// this.state.object.map((object)=>{
// console.log(object)
// ToxicLabels(object)
// })
}catch (err) {
console.log(err)
}
}
render() {
if( !this.state.render ) { return <div></div> }
return (
<div>
<h2>Hello {"Hola"}</h2>
{this.state.objects.map((object) => {
return ToxicLabels(object)
})}
</div>
)
}
}
This could work out.这可以解决。
this.setState({
objects: response.object,
})
...
{this.state.objects.map((object)=> ToxicLabels(object))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.