Reactjs 无法在render中的方法内显示承诺数据

我意识到我不能在react渲染中返回对象，但我在弄清楚如何返回时遇到了问题

错误消息：

Invariant violation, objects are not valid as a React child error

我的方法：

displayListItemComponent = item => {

    return this.getConcernsDB(item.values)
    .then(returnedConcerns => {
        if(returnedConcerns.length) {
          returnedConcerns.forEach(el => {
            return(el.name);
          })
        }
      }
    )
}

部分渲染：

<CollapseBody>
  { el.details.map(item => (
    this.displayListItemComponent(item)
  ))}
</CollapseBody>

{el.details.map（项=>(
此.displayListItemComponent（项）
))}

这里我试图从

displayListItemComponent

我试图在react render中返回

displayListItemComponent

。

---

我的假设是，通过返回函数

this.getConcernsDB

，它将向下链接并返回

el.name

。我怎样才能做到这一点呢？

你可以这样做。还有

el.name

包含什么

displayListItemComponent =(props) => {
    const {item} = props;
    const [data, setData] = useState();

    useEffect(() => {
      // i see you did this.getConcernsDB. where is it coming from?
       getConcernsDB(item.values)
    .then(returnedConcerns => {

        setData(returnedConcerns.values(el => el.name))
    )

    }, [])

    if(!data) return <SomeLoadingSpinner />

    // now you have access to the names in `data` variable. Return whatever component you want using the `data`
  }

displayListItemComponent=（道具）=>{
const{item}=props；
const[data，setData]=useState（）；
useffect（（）=>{
//我看到你这么做了。getConcernsDB。它是从哪里来的？
getConcernsDB（项值）
.然后（返回的关注点=>{
setData（returnedConcerns.values（el=>el.name））
)
}, [])
如果（！数据）返回
//现在您可以访问'data'变量中的名称了。使用'data'返回您想要的任何组件`
}
您可以这样做。
el.name
包含什么

displayListItemComponent =(props) => {
    const {item} = props;
    const [data, setData] = useState();

    useEffect(() => {
      // i see you did this.getConcernsDB. where is it coming from?
       getConcernsDB(item.values)
    .then(returnedConcerns => {

        setData(returnedConcerns.values(el => el.name))
    )

    }, [])

    if(!data) return <SomeLoadingSpinner />

    // now you have access to the names in `data` variable. Return whatever component you want using the `data`
  }

displayListItemComponent=（道具）=>{
const{item}=props；
const[data，setData]=useState（）；
useffect（（）=>{
//我看到你这么做了。getConcernsDB。它是从哪里来的？
getConcernsDB（项值）
.然后（返回的关注点=>{
setData（returnedConcerns.values（el=>el.name））
)
}, [])
如果（！数据）返回
//现在您可以访问'data'变量中的名称了。使用'data'返回您想要的任何组件`
}
您的方法返回a。应该是同步的，并且没有副作用（例如，它应该只从道具和状态返回允许的值）。因此，您需要将数据存储在中，并从状态呈现元素。
您的方法返回a。应该是同步的，并且没有副作用（例如，它应该只从道具和状态返回允许的值）。因此，您需要将数据存储在中，并从状态中呈现元素。
@bad_coder:其他问题是否足够相似，这些答案中的任何一个都会在这里有所帮助。另外：标题相同的原因是，这是错误消息的确切文本。不应更改确切的错误消息引号（我已还原它）-找到另一种方法使标题唯一。但是，如果新问题是“重复的”，则新问题应改为“标记”并报告为“重复的”已经有答案了。对一个问题有很多答案是可以的，但是如果问题本质上是一样的，最好把它们分类在同一个帖子下。@SherylHohman好的，我会改变的it@SherylHohman我理解你的推理，因为我的想法是一样的，在这种情况下，尽管是相同的错误信息，我认为原因是错误的原因是不同的…一个公平的比较是C Ansi中的“分段错误”，它可能有一百万个不同的原因导致同一个错误消息。因此，我不认为它是重复的（因为解决问题需要不同的解决方案）因此，没有理由将其标记为副本。@bad_coder:NP。我不确定，所以我没有标记，只是将其作为一般性的正面评论。感谢您检查并确认。是的，我遇到过可能有完全不同原因的MSSG！我也不知道是否有一个标题可以更好地描述此问题-错误MSSG经常出现这么好的搜索词：-o@bad_coder仅供参考，在这种情况下，我接受了你的编辑（因此你得到了要点）！你所有其他的编辑都是实质性的、有帮助的，你没有遗漏任何引人注目的内容。标题是一个近距离的判断，并不完全清楚“是”是错误消息的一部分。这是一个很好的编辑！我们都经历了学习过程。很高兴有你加入。另外，感谢你保持高标准：）@bad_coder:另一个问题是否足够相似，这些答案中的任何一个都会在这里有所帮助。另外：标题相同的原因是，这是错误消息的确切文本。不应更改确切的错误消息引号（我还原了它）-找到另一种方法使标题唯一。但是，如果新问题是“重复的”，新问题应改为“标记”并报告为“重复”已经有答案了。对一个问题有很多答案是可以的，但是如果问题本质上是一样的，最好把它们分类在同一个帖子下。@SherylHohman好的，我会改变的it@SherylHohman我理解你的推理，因为我的想法是一样的，在这种情况下，尽管是相同的错误信息，我认为原因是错误的原因是不同的…一个公平的比较是C Ansi中的“分段错误”，它可能有一百万个不同的原因导致同一个错误消息。因此，我不认为它是重复的（因为解决问题需要不同的解决方案）因此，没有理由将其标记为副本。@bad_coder:NP。我不确定，所以我没有标记，只是将其作为一般性的正面评论。感谢您检查并确认。是的，我遇到过可能有完全不同原因的MSSG！我也不知道是否有一个标题可以更好地描述此问题-错误MSSG经常出现这么好的搜索词：-o@bad_coder仅供参考，在这种情况下，我接受了你的编辑（因此你得到了要点）！你所有其他的编辑都是实质性的、有帮助的，你没有遗漏任何引人注目的内容。标题是一个近距离的判断，并不完全清楚“是”是错误消息的一部分。这是一个很好的编辑！我们都经历了学习过程。很高兴有你加入。另外，感谢你保持高标准：）