Javascript React空白文本节点不能显示为<；的子节点；t车身>；

我想创建带有加密货币符号的表，但出现以下错误

警告：validateDOMNesting（…）：空格文本节点不能显示为的子节点。确保源代码每行的标记之间没有多余的空格。

import React, { Component } from 'react'

class Main extends Component {
    constructor(props) {
        super(props)

        this.state = {
            symbol: ''
        }
    }

    createTable(coins) {
    }
    getDataFromApi() {
        const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=50&page=1&sparkline=false'
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    symbol: data.map(coin => {
                        return <tr key={coin.symbol}><td>{coin.symbol}</td></tr>;
                    })
                }, () => console.log(this.state.symbol))
            })
    }
    componentDidMount() {
        this.getDataFromApi()
    }
    render() {
        return (
            <div><table><tbody>{this.state.symbol}</tbody></table></div>
        )
    }
}

export default Main

import React，{Component}来自“React”
类主扩展组件{
建造师（道具）{
超级（道具）
此.state={
符号：“”
}
}
createTable（硬币）{
}
getDataFromApi（）{
常量url=https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=50&page=1&sparkline=false'
获取（url）
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
符号：data.map（硬币=>{
返回{coin.symbol}；
})
}，（）=>console.log（this.state.symbol））
})
}
componentDidMount（）{
这是getDataFromApi（）
}
render（）{
返回(
{this.state.symbol}
)
}
}
导出默认主

---

看起来我想要它，但它抛出了这个警告。最后，我想要一些类似但显然更简单的东西：）

找到了。问题是符号状态是初始字符串，我刚刚将其转换为数组，如下所示

this.state = {
            symbol: []
        }