Реагировать заменить данные состояния компонента приложения на JSON - PullRequest
Новая
       4

Реагировать заменить данные состояния компонента приложения на JSON

0 голосов
/ 24 мая 2018

Я пытаюсь загрузить данные Json в компонент реагирования.У меня есть два компонента ProjectCardContainer и ProjectDetailPage, в которых при нажатии на ссылку <h6> я хочу, чтобы данные состояния App отображались в виде текста ProjectDetailPage.Затем я узнаю, что React State являются локальными, и их нельзя передать другому компоненту. Поэтому я создал Json как CardData Но теперь проблема в том, как я могу отобразить CardData, заменив или изменив App и отобразив их.в ProjectDetailPage как текст?

Спасибо.

Суть кода

CardData.tsx 

const CardData = {
  "cards": [
    {
      "projectID": "00001",
      "projectName": "One tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    },
    {
      "projectID": "00002",
      "projectName": "Two tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    },
    {
      "projectID": "00003",
      "projectName": "Three tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    }
  ]
}
export default CardData;

1 Ответ

0 голосов
/ 24 мая 2018

Я не знаю, почему у вас есть компонент App, когда у вас уже есть компонент ProjectCardContainer.Просто импортируйте данные, которые вы экспортировали, во фрагмент, которым вы поделились выше, и установите его в качестве состояния.(Убедитесь, что путь импорта указан правильно.) 

import CardData from './CardData'

class ProjectCardContainer extends React.Component {
  state = CardData;
  render() {
    return <CardList cards={this.state.cards} />;
  }
}
...