简体   繁体   English

如何遍历一个异步返回的object并显示在react.js中?

[英]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.

相关问题 我如何在 react.js 中遍历 object 数组并在 object 中添加价格值,如下所示 - How do i iterate over an array of object in react.js and add the values of prices in the object as shown below React.js 迭代对象而不是 Object.entries 的正确方法 - React.js right way to iterate over object instead of Object.entries 在 react.js 中,如何为 video.js 对象异步分配源属性 - In react.js how can you asynchronously assign source attribute for video.js object 在 React.js 中,promise 的值作为 [object, object] 返回 - the value of the promise is returned as an [object, object] in React.js 如何在React JS中的对象内的数组上进行迭代 - How to iterate over an array that's inside an object in React JS React.js使用map迭代对象键和值 - React.js iterate through object keys and values using map 在 react.js 中异步导入 npm 模块 - import npm modules asynchronously in react.js 如何使用 Bootstrap 在 React.js 中显示图像 - How to display an image in React.js with Bootstrap 如何在 React.js 中显示 Javascript 对象? - How to display Javascript objects in React.js? 如何使用React JS遍历UI中作为this.state.data访问的Java休眠DAO返回的列表? - How to iterate over the list returned by a Java hibernate DAO that is accessed in UI as this.state.data using React JS?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM