Question

我在弄清楚应该在哪里进行迭代以及应该在何处进行切换的逻辑时遇到了麻烦。我有一个App.js来保存所有内容，一个listitem组件文件，我要在其中构建列表项，在切换中，我要创建一个状态函数，当前正在尝试进行迭代。我也对如何获取json数据感到困惑。我放弃尝试从外部获取它，并将其加载到本地文件中。如何访问正确的值并将其放入列表？

我目前有这个，可以显示一个电台名称和频道。 Here is my current card。和Here is my goal

链接，因为我无法发布图片

-Here is app.js

import React from 'react';
import PostList from './posts/postsList'
import ListItem from './lists/ListItem'
import PostData from './data/postData.json'
import './App.css';
import Toggle from "./Toggle"




function App() {
  return (
    <div className="App">
      <body>
        <div className="card-trip">
        <div class="card-trip-header">
          <h3 id='header'>Stations</h3>
        </div>
          <div class="card-trip-infos">
            <div className='root'>

              <Toggle/>

            </div>
            <img class="card-trip-user avatar-bordered"/>
          </div>
        </div>
      </body>

    </div>
  );
}

export default App;

-Here is toggle.js

import React, { Component } from 'react'
import ListItem from './lists/ListItem'
import PostData from './data/postData.json'
import { directive } from '@babel/types';

export default class Toggle extends Component {
  state = {
    on: false,
  }
  toggle = () => {
      this.setState({
      on: !this.state.on
    })
  }
  // render() {
  //   return (
  //     <ul>
  //        {PostData.radios.map((postDetail, index) => {
  //           return <ListItem/>
  //        })}
  //     </ul>
  //    )
  // }

  render() {
    return (
      <ul>
          <div>
                <ListItem/>
          </div>        
      </ul>
    )
  }
}

-Here is my ListItem.js

import React, { Component } from 'react'
import PostData from '../data/postData.json'
import ReactDOM from "react-dom";


export default class ListItem extends Component {
    state = {
        on: false,
      }
      toggle = () => {
          this.setState({
          on: !this.state.on
        })
      }

    render () {
        return (
           <li>
               <div>{PostData.radios[0].name} {PostData.radios[0].frequency}</div>
           </li>
        )
    }

};

-Here is my json data

{

    "radios": [
        {
            "name": "Radio 1",
            "frequency": 99.23,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 2",
            "frequency": 88.13,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 3",
            "frequency": 89.99,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        },
        {
            "name": "Radio 4",
            "frequency": 93.23,
            "image": "https://dummyimage.com/400x400/3d43ff/ffffff&text=RadioOne"
        }
    ]

}

-index.css文件

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.card-trip {
  overflow: hidden;
  background: #2F2F39;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  width: 250px;
  height: 400px;
  border-radius: 30px;
  color: #797D8D;
}

.card-trip > img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.card-trip h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-trip p {
  font-size: 12px;
  opacity: .7;
  margin: 0;
}


.card-trip .card-trip-infos {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.card-trip-infos .card-trip-user {
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
}
.card-trip-header {
  height: 50px;
  background-color: #ECAD60;

}

#header {
  margin-top: 0;
  padding-top: 5px;
}

#frequency {
  text-align: right;
}

#radioName {
  text-align: left;
}

body {
  margin-top: 50px;
  margin-left: 50px;
  list-style: none;
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
  border: 5px;
}

如上所述，我想使用json数据制作一个列表组件，并使每个项目都可单击以显示图片，这些图片由json中的url提供。

谢谢！

Answer 1

您应该在主要组件中导入JSON数据，并映射每个结果。您应该将每个循环的数据传递到容器，并在其中使用它。然后，您可以编写将显示图像的onclick事件。选中此repl.it。在我看来，您是新来的人，所以我建议学习钩子而不是类。

使列表组件做出反应，并使每个列表项成为一个切换项，以便在单击时在其下方显示图片

1 个答案: