如何遍历异步返回的对象并将其显示在react.js中？

山姆

我在显示函数调用结果时遇到麻烦等待有毒（“有毒的句子”）。我能得到的最接近的结果是在react插件中以组件的状态查看此更新，但是它没有更新组件本身。

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>
      )
    }
  }

返回的数据结构。这就是TensorFlow的毒性模型返回数据的方式。数组中有7个对象。在每个对象内都有一个标签和一个结果数组，显示匹配（对或错）和概率。

{
  "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)}"
      ]
    }
  ]
}

没有部落

此代码对我有效，仅排除有毒功能并使用您自己的。

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>
      )
    }
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。