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

Question

我在显示函数调用的结果时遇到了问题 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)}"      ]    }  ]}

Answer 1

此代码适用于我，只需排除有毒功能并使用您自己的功能即可。

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>

      )

    }

  }

Answer 2

这可以解决。

this.setState({

        objects: response.object,

      })

...

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