亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何遍歷異步返回的對象并將其顯示在react.js中?

如何遍歷異步返回的對象并將其顯示在react.js中?

莫回無 2023-06-15 09:52:45
我在顯示函數調用的結果時遇到了問題 await toxic("a toxic sentence")。我能得到的最接近的是在 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)}"      ]    }  ]}
查看完整描述

2 回答

?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

此代碼適用于我,只需排除有毒功能并使用您自己的功能即可。


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>

      )

    }

  }


查看完整回答
反對 回復 2023-06-15
?
寶慕林4294392

TA貢獻2021條經驗 獲得超8個贊

這可以解決。


this.setState({

        objects: response.object,

      })

...

{this.state.objects.map((object)=> ToxicLabels(object))}


查看完整回答
反對 回復 2023-06-15
  • 2 回答
  • 0 關注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號