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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>

<!-- The corresponding part is at the bottom. (It is faster to count from the bottom)
(There is a mark in the comment) -->

<div class="solid-ti"></div>

<div id="wrap">
  <div id="left">
    <h1 class="title">動と静を共有する椅子「Rollse」</h1>

    <div class="swiper-pagination"></div>
    <div class="swiper-container swiperCnt max">
      <div class="swiper-wrapper imgs max-inner">
        <div class="swiper-slide"><img class="work" src="http://placehold.jp/45/1920a6/ffffff/693x350.png?text=1" alt="Rollse-logo" /></div>
        <div class="swiper-slide"><img class="work" src="http://placehold.jp/45/199fa6/ffffff/693x350.png?text=2" alt="Rollse-killer" /></div>
        <div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a61972/ffffff/693x350.png?text=3" alt="Rollse-data" /></div>
        <div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a6a619/ffffff/693x350.png?text=4" alt="Rollse-image" /></div>
      </div>
    </div>

    <div class="L-under">
      <div class="mis">
        <h3 class="mission">MISSION:</h3>
        <p class="m-p">触覚に訴えるプロダクト　　　▶︎ 3人チームの1人が、この触り心地を発見</p>
      </div>

      <div class="solid-mc"></div>

      <div class="con">
        <h2 class="concept">CONCEPT:</h2>
        <p class="c-p">緊張感のある空間をつくる。</p>
      </div>

      <div class="what">
        <img src="http://placehold.jp/45/d4d4d4/d4d4d4/28x20.png?text=_" alt="2nd" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="ai" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="vw" />

        <span>企画</span>
        <span>雑貨の設計</span>
        <span>ネーミング</span>
        <span>文章</span>
        <span>展開</span>
      </div>
    </div>
  </div>

  <div id="right">
    <div class="top">
      <div class="cat">
        <h5 class="category">CATEGORY:</h5>
        <p class="cg-p">雑貨・プロダクト</p>
      </div>

      <div class="cla">
        <h5 class="class">CLASS:</h5>
        <p class="cl-p">デザイン研究</p>
      </div>

      <div class="rel">
        <h5 class="release">RELEASE:</h5>
        <p class="r-p">2017/06</p>
      </div>
    </div>
    <div class="heartbox">
      <div class="tar">
        <h3 class="target">TARGET:</h3>
        <p class="t-p">生活に刺激を求めている人<br> デザインされたものが好きな人
          <br> 動くのに若干抵抗がある人
        </p>
      </div>
      <div>
        <input type="checkbox" name="fav" id="fav">
        <label for="fav">
            <svg class="heart" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 32"
              style="enable-background:new 0 0 37 32;" xml:space="preserve">
              <path class="st0" d="M27,0c-2.5,0-4.9,0.9-6.7,2.6C19.6,3.2,19,4,18.5,4.7C18,4,17.4,3.2,16.7,2.6C14.9,0.9,12.5,0,10,0
            C4.5,0,0,4.5,0,10c0,3.7,1.2,6.7,3.9,9.8c3.9,4.6,13.9,11.6,14.3,11.9c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1
            c0.4-0.3,10.4-7.3,14.3-11.9c2.7-3.2,3.9-6.1,3.9-9.8C37,4.5,32.5,0,27,0z" /></svg>
          </label>
      </div>
    </div>

    <div class="solid-tm"></div>





    <!--
from here
-->
    <div class="mai max">
      <section class="main max-inner">
        <p class="active 0">This part is Switch scroll. (move by scrolling) <br> rolls（渦）×rose（バラ）<br> モチーフの見た目から命名しました。
          <br> “R”は小文字より大文字にすることで、凛々しさを演出し、
          <br> 大人の美しさを際立たせました。
        </p>
        <br>
        <p class="1">触覚に訴える。それで日常の問題を解決できたら。ついつい無駄に過ごしてしまいがちな日常。<br> そこであえて触感の悪いものを提供して、その無駄な時間を少しでも減らせる手助けになる商品をつくりました。
        </p>
        <br>
        <p class="2">無数の紙を渦状に丸めた形状によって、片面は固く、もう片面は程よく弾力のある、画期的な椅子になっています。<br> 様々な素材や大きさのロールによるカスタム仕様なので、様々な展開が可能です。
        </p>
        <p class="3">毎日の慣れた生活空間の中に新感覚の刺激を与えてくれ、エキサイティングな感覚と少しのスリルを味わうことができます。</p>
      </section>
    </div>
    <!-- 
to here
-->





    <img src="http://placehold.jp/45/d4d4d4/d4d4d4/14x12.png?text=_" alt="▼" class="▼" width="14" />

    <div class="R-under">
      <div class="nbb">
        <h4 class="nb">N.B.:</h4>
        <p class="nb-p">投票第１位</p>
      </div>

      <div class="per">
        <h4 class="period">PERIOD:</h4>
        <p class="p-p">1週間</p>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

React空白文本节点不能显示为的子级

1 个答案: