Реагируйте: Как получить доступ к объекту и отображать значения? - PullRequest
Новая
       4

Реагируйте: Как получить доступ к объекту и отображать значения?

0 голосов
/ 07 марта 2020

Я создаю простой блог, используя React Hooks. До сих пор я успешно получаю данные из базы данных, и я могу консоль протоколировать все данные с props.articles. Однако, если я напишу props.articles.title, он скажет «неопределенный». Как я могу отобразить заголовок и текст объекта, который совпадает с идентификатором, полученным из родительского компонента? 

The data of blog posts

[
  {
    "id": "1oQAPxRl2k7Spev10qFE",
    "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
    "title": "Title#1"
  },
  {
    "id": "ThRwQIgpLUB7iBq1H8VI",
    "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
    "title": "Title#2"
  },
  {
    "id": "aJvajhmoCXbfU7RJVkzn",
    "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
    "title": "Title#3"
  },
  {
    "id": "pFFNhyrv3aJJg8Cq18Fx",
    "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "title": "Title#4"
  }
]

import React from 'react';
import { useParams } from 'react-router';

function Page(props) {
  const { id } = useParams();
  const targetId = id;
  const targetUser = props.articles.find(() => targetId === props.articles.id);
  console.log("targetUser", targetUser) // undefined

    return (
      <div>               

          {console.log("targetUser", targetUser)}  // undefined

      </div>
    );
  }

  export default Page;

import React, { useState, useEffect } from 'react';
import Header from './Header';
import Page from '../pages/Page'
import { db } from "../Firebase";
import {
    BrowserRouter as Router,
    Route,
    Switch
} from 'react-router-dom';

const App = () => {

    const [articles, setArticles] = useState([]);

    useEffect(() => {

        const unsubscribe = db
            .collection('articles')
            .onSnapshot((snapshot) => {
                const newArticles = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
          }))
          setArticles(newArticles)
        })

          return () => unsubscribe()
    }, []);

    return (
        <div>
            <Router> 
                <Header />
                <Switch>
                    <Route exact path="/" render={() => <Home articles={articles} />} />
                    <Route exact path="/page/:id/" render={() => <Page articles={articles} />} />
                </Switch>
            </Router>     
        </div>
    );
}

export default App;

Ответы [ 2 ]

1 голос
/ 07 марта 2020

извините. Я изменюсь. Пожалуйста, используйте этот код 

let targetUser = props.articles.filter(x=>x.id === targetId);
targetUser = targetUser.length > 0 ? targetUser[0] : null;

вместо 

  const targetUser = props.articles.find(() => targetId === props.articles.id);
1 голос
/ 07 марта 2020

props.articles - это массив. Таким образом, вы не можете получить доступ к заголовку, используя props.articles.id.

. props.articles.find будет перебирать каждый объект в массиве. 

const targetUser = props.articles.find((article) => targetId.id === article.id);

Примечание. Вы изначально извлекаете свойство id -> const { id } = useParams();, а затем назначаете его для targetId const targetId = id;. Кажется, id не является объектом. Если это так, вы можете получить доступ к значению id, используя targetId вместо targetId.id.

- Правка - 

const targetId = `1oQAPxRl2k7Spev10qFE`;

const props = {
  articles: [
    {
      "id": "1oQAPxRl2k7Spev10qFE",
      "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
      "title": "Title#1"
    },
    {
      "id": "ThRwQIgpLUB7iBq1H8VI",
      "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
      "title": "Title#2"
    },
    {
      "id": "aJvajhmoCXbfU7RJVkzn",
      "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
      "title": "Title#3"
    },
    {
      "id": "pFFNhyrv3aJJg8Cq18Fx",
      "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "title": "Title#4"
    }
  ]
};

const targetUser = props.articles.find((article) => targetId === article.id);

console.log('Target User: ', targetUser);
console.log('Target User title: ', targetUser.title);
...