如何遍历异步返回的对象并将其显示在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 = () => {&nbsp; &nbsp; return {&nbsp; "object": [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "identity_attack",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: false, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "insult",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: true, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "obscene",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: null, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "severe_toxicity",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: false, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "sexual_explicit",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: null, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "threat",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: false, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "label": "toxicity",&nbsp; &nbsp; &nbsp; "results": [&nbsp; &nbsp; &nbsp; &nbsp; "{match: true, probabilities: Float32Array(2)}"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]}}function ToxicLabels(theObject) {&nbsp; return (&nbsp; <h2>{theObject.label}&nbsp; match {theObject.results[0].match}</h2>&nbsp; )}export default class App extends React.Component {&nbsp; constructor() {&nbsp; &nbsp; super()&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; render: false,&nbsp;&nbsp; &nbsp; &nbsp; objects: [],&nbsp; &nbsp; }&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.renderThePost()&nbsp; }&nbsp; componentDidUpdate(){&nbsp; &nbsp; this.render()&nbsp; }&nbsp; renderThePost = async () => {&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; let response = await toxic('you suck')&nbsp; &nbsp; &nbsp; console.log( response )&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; objects: response.object,&nbsp; &nbsp; &nbsp; &nbsp; render: true&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; // this.state.object.map((object)=>{&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;console.log(object)&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;ToxicLabels(object)&nbsp; &nbsp; &nbsp; // })&nbsp; &nbsp; &nbsp; }catch (err) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(err)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; render() {&nbsp; &nbsp; &nbsp; if( !this.state.render ) { return <div></div> }&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Hello {"Hola"}</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.objects.map((object) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ToxicLabels(object)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp; }

Answer 2

这可以解决。this.setState({&nbsp; &nbsp; &nbsp; &nbsp; objects: response.object,&nbsp; &nbsp; &nbsp; })...{this.state.objects.map((object)=> ToxicLabels(object))}