React router v4 - невозможно console.log {match.params.id} или сохранить как переменную

import React, { Component, Fragment } from 'react';


const Project = ({match}) => {
  console.log({match.params.project_name})
  return (
    <div>
      <h3>
        {match.params.project_name}
      </h3>
    </div>
  )
}


export default Project;

Значение project_name отлично отображается в теге h3 на экране, но я не могу зарегистрировать или сохранить то же значение в переменной. Я пытаюсь взять значение project_name и условно визуализировать компоненты на основе его значения

Это неправильный синтаксис для консольного журнала свойства объекта. ES6 позволяет регистрировать ключ вместе с его значением, например: {value} или {projectName}. Вам нужно записать консольный журнал как console.log({ projectName: match.params.project_name }); | Кроме того, можете ли вы создать проект на JSFiddle / codeandbox.io? Код, который вы написали, кажется в порядке, и проблему нельзя отладить, глядя на это.

Sivcan Singh 13.09.2018 19:12

Кроме того, вам не нужно импортировать Component из response, поскольку вы используете функциональный компонент, а не компонент на основе классов, расширяющий Component.

Sivcan Singh 13.09.2018 19:14

Я не уверен, как разместить весь мой проект на JSFiddle, поскольку это набор отдельных компонентов и папок. Однако я могу дать ссылку на репозиторий github, надеюсь, это поможет?

Nahmed39 13.09.2018 19:23

Также, чтобы повторить ... значение {match.params.project_name} действительно и отображается на экране

Nahmed39 13.09.2018 19:23

Да, ссылка на github была бы крутой. знак равно

Sivcan Singh 13.09.2018 19:25

Позвольте нам продолжить обсуждение в чате.

Sivcan Singh 13.09.2018 19:27
0
6
241
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны иметь возможность войти без использования фигурной скобки:

console.log(match.params.project_name)

Чтобы сохранить project_name как переменную, просто:

const project_name = match.params.project_name

Или вы можете использовать деструктурирующее задание следующим образом:

const { project_name } = match.params
console.log(project_name)

Чтобы дать другое имя:

const { project_name: myProject } = match.params
console.log(myProject)

Другие вопросы по теме