Блог

Главная - Вопросы по программированию - Как получить доступ к данным, переданным через «this.props.history.push(…)»

Как получить доступ к данным, переданным через «this.props.history.push(…)»

#reactjs

Вопрос:

Код конструктора, содержащий данные

 constructor(props){
    super(props);
    this.state = {
        Data: [
            {
                "name": 'red'
            },
            {
                "name": 'green'
            },
            {
                "name": 'red'
            },
            {   
               "name": 'brown'
            },
            {
                "name": 'yellow'
            },
            {
                "name": 'brown'
            }
        ]
    }
}

Код моей кнопки, с помощью которой я сопоставляю данные

 {this.state.Data.map((color) => (
                        <>
                        <div className="ViewDetailsBtn"><Button onClick={this.clickMe.bind(this, color.name)} className="ViewDetailsBtnLink">View Details</Button></div></>
                        
                    ))}

Код функции onClick

 clickMe = (details) => {
    console.log(details);
    this.props.history.push({
        pathname: "/ViewDetails", 
        state: {detail: details}
    });
}

Здесь он правильно отображает название цвета на моей консоли и перенаправляет меня на просмотр сведений, но как мне отобразить название цвета на странице просмотра сведений?

Код страницы просмотра сведений

     import React from 'react'
    const App = (props) => {
    console.log(props);
    //const data = props.location.state.detail;
    return (
        <div>
            <h1>Details:-</h1>
            {/* <h1>{data}</h1> */}
        </div>
    )
   }

   export default App

Комментарии:

1. вы можете сделать реквизит.местоположение.состояние.данные

2. Итак, должен ли я ввести «const data = реквизиты.местоположение.состояние.данные»? и должен ли я отображать его с помощью «<h1>{данные}<h1></h1>»? Я довольно новичок в этом деле.

3. это зависит от того, что у вас есть data . если ваши данные представляют собой строку, вы можете сделать то, что сказали выше .

4. Да, это веревочка. Но это не работает :/. Появляется ошибка «Ошибка типа: Не удается прочитать свойство «данные» неопределенного». Я обновил код в вопросе для ViewDetails

5. Ваш ViewDetails компонент отображается с помощью Route ? . Также добавьте a console.log(props) и проверьте, можете ли вы видеть location в нем .

Ответ №1:

ваш компонент ViewDetails должен принимать параметр: const ViewDetails = (props) => {} тогда вы сможете получить доступ к этим данным с помощью этого параметра

Комментарии:

1. Не могли бы вы также рассказать, как получить доступ к данным с помощью параметра? Как я должен определить параметр?

Метки: ,