Question

我试着学习反应，我遇到了一个小问题。

我可以在页面上写下你好的世界，现在我正试图从api中获取数据。

我可以像我的console.log（this.state.data）一样console.log我的数据; 在控制台中返回这样的内容

{＆＃34;行星＆＃34 ;: [{＆＃34; ID＆＃34;：＆＃34; 1＆＃34;＆＃34; planetAge＆＃34;：＆＃34; 100＆＃34;＆＃34;介质＆＃34;：[{＆＃34;名称＆＃34;：＆＃34;火星＆＃34;＆＃34; URL＆＃34;：＆＃34; /图像/ 1＆＃34;}]}，{＆＃34; ID＆＃34; ：＆＃34; 2＆＃34;＆＃34; planetAge＆＃34;：＆＃34; 200＆＃34;＆＃34;介质＆＃34;：[{＆＃34;名称＆＃34;：＆＃ 34;金星＆＃34;＆＃34; URL＆＃34;：＆＃34; /图像/ 2＆＃34;}]}，{＆＃34; ID＆＃34;：＆＃34; 3＆＃34 ;, ＆＃34; planetAge＆＃34;：＆＃34; 300＆＃34;＆＃34;介质＆＃34;：[{＆＃34;名称＆＃34;：＆＃34;土星＆＃34;＆＃34 ; URL＆＃34;：＆＃34; /图像/ 3＆＃34;}]}，{＆＃34; ID＆＃34;：＆＃34; 4＆＃34;＆＃34; planetAge＆＃34;：＆＃34; 400＆＃34;＆＃34;介质＆＃34;：[{＆＃34;名称＆＃34;：＆＃34;地球＆＃34;＆＃34; URL＆＃34;：＆＃34; /图像/ 4＆＃34;}]}，{＆＃34; ID＆＃34;：＆＃34; 5＆＃34;＆＃34; planetAge＆＃34;：＆＃34; 500＆＃34;＆＃ 34;介质＆＃34;：[{＆＃34;名称＆＃34;：＆＃34;木星＆＃34;＆＃34; URL＆＃34;：＆＃34; /图像/ 5＆＃34;}]} ]}

我怎么能在我的页面上写出来，虽然它是这样的

render() {
    if(this.state.data) {
        console.log(this.state.data);
        return (
        <div class="planet">
          <h1>{item.name}</h1>
          <span>{item.planetAge}</span>
          <img src="{item.url}" />
        </div>

        )
    }

    return (<h1>Loading...</h1>);
}

但我一直在犯错误

Answer 1

数据包含一个键planets，其array为object，您需要使用map来打印所有值。当您在this.state.data.planets上运行地图时，map正文中的项目将是object的每个array，然后您可以按item.planetName等方式访问这些值。 / p>

使用此：

render() {
    if(this.state.data) {
        console.log(this.state.data);
        return (
            <div>
              {this.state.data.planets.map(item => {
                  return(
                      <div class="planet">
                          <h1>{item.media[0].name}</h1>
                          <span>{item.planetAge}</span>
                          <img src={item.media[0].url} />
                      </div>
                  )
              })}                
            </div>
        )
    }
    return (<h1>Loading...</h1>);
}

<强>更新

将构造函数中的数据定义为null，或者将数据定义为[] 然后按if(this.state.data.lenght)检查长度，如果您将数据定义为{}，则按planets检查其中包含if(this.state.data.planets)密钥的位置。

检查一下：

let data = {"planets": [{"id":"1","planetAge":"100","media":[{"name":"mars","url":"/images/1"}]},{"id":"2","planetAge":"200","media":[{"name":"venus","url":"/images/2"}]},{"id":"3","planetAge":"300","media":[{"name":"saturn","url":"/images/3"}]},{"id":"4","planetAge":"400","media":[{"name":"earth","url":"/images/4"}]},{"id":"5","planetAge":"500","media":[{"name":"jupiter","url":"/images/5"}]}]}

data.planets.map(item => {
   console.log(item. planetAge, item.media[0].name, item.media[0].url)
})

Answer 2

问题是你的对象有一个行星数组，所以你需要映射然后然后返回值。此外，您在item下没有姓名和网址，您必须从media

访问它们

class App extends React.Component {
 state = {data : {"planets": [{"id":"1","planetAge":"100","media":[{"name":"mars","url":"/images/1"}]},{"id":"2","planetAge":"200","media":[{"name":"venus","url":"/images/2"}]},{"id":"3","planetAge":"300","media":[{"name":"saturn","url":"/images/3"}]},{"id":"4","planetAge":"400","media":[{"name":"earth","url":"/images/4"}]},{"id":"5","planetAge":"500","media":[{"name":"jupiter","url":"/images/5"}]}]}
 }

render() {
    if(this.state.data) {
        console.log(this.state.data);
        return (
          <div>
            {this.state.data.planets.map((item) => {
                return (
                  <div class="planet">
                    <h1>{item.media[0].name}</h1>
                    <span>{item.planetAge}</span>
                    <img src={item.media[0].url} />
                  </div>
                )
            })}
          </div>
        
        

        )
    }

    return (<h1>Loading...</h1>);
}
}
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

一些事情：您的返回数据是一个数组，因此您需要遍历数组以显示每个行星。如果你只想显示1个星球，你可以使用它的索引（仅用于测试目的或其他东西）。

function eventCall(t, num) {
  var clickedBox = t.style.backgroundColor;
}

var fns = [];

function adder(colorBox, num) {
  function fn() {
    eventCall(this, num);
  }

  colorBox.addEventListener('click', fn);

  fns.push(fn);
}

function remover(colorBox) {
  fns.forEach(function(fn) {
    colorBox.removeEventListener('click', fn);
  });
}

请记住，您的数据（当前）位于<div class="planet"> <h1>{this.state.data.planets[0].media[0].name}</h1> <span>{this.state.data.planets[0].planetAge}</span> <img src={this.state.data.planets[0].media[0].url} alt={this.state.data.planets[0].media[0].name} /> </div>。将数据分配给变量是合适的，而不是在jsx内的任何地方使用this.state.data。

js写出来自json的数据

3 个答案: