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

Question

我在显示 function 调用 await toxic("a toxic sentence") 的结果时遇到了问题。 我能得到的最接近的是在 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>
      )
    }
  }

返回的数据结构。 TensorFlow 的 toxicity model 是这样返回数据的。 数组中有 7 个对象。 在每个 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)}"
      ]
    }
  ]
}

Answer 1

此代码适用于我，只需排除有毒的 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>
      )
    }
  }

Answer 2

这可以解决。

this.setState({
        objects: response.object,
      })
...
{this.state.objects.map((object)=> ToxicLabels(object))}