Блог

Главная - Вопросы по программированию - Попытка извлечения определенной записи в файле JSON

Попытка извлечения определенной записи в файле JSON

#json #reactjs

#json #reactjs

Вопрос:

Я пытаюсь получить только одну запись из моего файла JSON, файл JSON находится в общедоступной папке, в которой я установил codesandbox https://codesandbox.io/live/7gu09fv

Сейчас происходит то, что он просто возвращает первую запись из JSON и не сопоставляет идентификатор с идентификатором страницы

 import React, { useState, useEffect } from 'react';
import {
  useLocation
} from "react-router-dom";



function FetchContent( { pageId } ) {
    
const [page, setPage] = useState([]); 

     useEffect(() => {
      fetch("pages.json" ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
        .then(res => res.json())
        .then(json =>{
             setPage(json)
      
                    }
              )
         }, []);
    
    const found = page.find(id => id = { pageId });
    
    if (!found) return <div />;
    return (
        <>
        
            <h1 key={found.id}>{found.title.rendered}: {found.id} : {pageId}</h1>
        

        </>
    );
}


function Page() {
  const { state:  { pageId }  } = useLocation();
  

  return (
    <div className="container-fluid">
      
      <FetchContent  pageId={pageId} />
      
     </div>
  );
}
 
export default Page;

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

1. пожалуйста, посмотрите мое обновление

Ответ №1:

 import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

function FetchContent({ pageId }) {
const [foundItem, setFoundItem] = useState();
  useEffect(() => {
    fetch("pages.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then((res) => res.json())
      .then((json) => {
        const found = json.find(({id}) => (id === pageId));
        setFoundItem(found);
      });
  }, [pageId]);

  if (!foundItem) return <div />;
  return (
    <>
      <h1 key={foundItem.id}>
        {foundItem.title amp;amp; foundItem.title.rendered ? foundItem.title.rendered: ''}: {foundItem.id} : {pageId}
      </h1>
    </>
  );
}

function Page() {
const location = useLocation();
const [pageId, setPageId] = useState(null);
useEffect(()=> {
  if(location.state){
    setPageId(parseInt(location.state.pageId, 10));
  }
}, [location]);
  return (
    <div className="container-fluid">
      <FetchContent pageId={pageId} />
    </div>
  );
}

export default Page;

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

1. DarthJS, я не нахожу ни одного из них работающим

2. const found = page.find(({id}) => id === pageId ); вы пробовали это?

3. это дает мне ошибку типа: найдено не определено

4. кажется, ваш объект ответа — json.items , также ваш идентификатор — ID

5. const найдено = myrt.find(({ID}) => ID === pageId );

Ответ №2:

Попробуйте это:

  const found = page.find(obj => obj.id ===  pageId);

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

1. Привет, это не дает мне никаких результатов вообще

2. Ваша песочница отличается от той, которой вы делитесь в вопросе, можете ли вы выровнять их, чтобы было легко устранить неполадки?

3. Привет, Шими, я только что ее вставил, что не выровнено?

4. о, подождите, другие люди работают над этим и изменили то, как это выглядит

5. В коде в изолированной среде вообще нет found указанной настройки или found переменной. Так что мне пришлось догадываться.