Zeigen Sie die ausgewählte Zeile von JSON-Daten in Reactjs an

Jungs, ich möchte alle Datensätze in JSON-Daten einzeln anzeigen, ohne die Karte zu verwenden, aber wenn ich anfange, [] zu verwenden, funktioniert die Reaktions-App nicht mehr, was mein Problem ist, ich habe {news[0].title} verwendet, aber ich weiß nicht, was falsch, der Code lautet:

function News() {
 const [news, fetchnews] = useState([]);
 const getData = () => {
 fetch('https://example.com/v1/news/list/fa/1')
.then((res) => res.json())
.then((res) => {
 console.log(res);
 fetchnews(res?.news);
 });
 };
 useEffect(() => {
 getData()
 }, [])
 return (
 <section id="news">
 <div className="container-fluid">
 <div className="headline-news row">
  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
  <h2>اخبار</h2>
  <h1>{news[0].title}</h1>
  <p>{news[0].short}</p>
  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
  </div>
  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
  <img className="figure-img" src={news[0].image} alt=""/>
  <a href="#">آرشیو کامل اخبار</a>
  </div>
 </div>
 <div className="breaking-news row">
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news[1].title}</h3>
  <p>{news[1].short}</p>
  </div> 
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news[2].title}</h3>
  <p>{news[2].short}</p>
  </div> 
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news[3].title}</h3>
  <p>{news[3].short}</p>
  </div>
 </div>
 </div>
 </section>
 );
 }
 
 export default News; ```
help me with this problem guys is there any resource to give complete and fixed details about JSON and JSON files and how we can use it?

Lösung des Problems

Überprüfen Sie, ob die Daten verfügbar sind oder nicht überall.

function News() {
 const [news, fetchnews] = useState([]);
 const getData = () => {
 fetch('https://example.com/v1/news/list/fa/1')
.then((res) => res.json())
.then((res) => {
 console.log(res);
 fetchnews(res?.news);
 });
 };
 useEffect(() => {
 getData()
 }, [])
 return (
 <section id="news">
 <div className="container-fluid">
 <div className="headline-news row">
  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
  <h2>اخبار</h2>
  <h1>{news.length && news[0]?.title}</h1>
  <p>{news.length && news[0]?.short}</p>
  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
  </div>
  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
  <img className="figure-img" src={news.length && news[0]?.image} alt=""/>
  <a href="#">آرشیو کامل اخبار</a>
  </div>
 </div>
 <div className="breaking-news row">
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news.length && news[1]?.title}</h3>
  <p>{news.length && news[1]?.short}</p>
  </div> 
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news.length && news[2]?.title}</h3>
  <p>{news.length && news[2]?.short}</p>
  </div> 
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{news.length && news[3]?.title}</h3>
  <p>{news.length && news[3]?.short}</p>
  </div>
 </div>
 </div>
 </section>
 );
 }
 
 export default News;

Die zweitbeste Lösung ist die Slice-Methode

{[...news.slice(1)].map((data,index)=>{
const {title, short} = data
return (
 <div className="breaking-news row">
  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
  <h3>{title}</h3>
  <p>{short}</p>
  </div>
)}) 
}