React 空白文本节点不能作为 <tbody> 的子节点出现

Question

我想用加密硬币符号创建表格，但我收到此错误 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code.

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

看起来我想要它，但它会引发此警告。最后我想要https://www.coingecko.com/en 这样的东西，但显然更简单:)

Answer 1

找到了。问题是符号状态是初始字符串，我只是将它转换为数组，就像这样

this.state = {
            symbol: []
        }