在reactjs中显示选定的json行数据

Question

伙计们，我想在不使用地图的情况下一个一个地显示 JSON 数据中的任何记录，但是当我开始使用 [] 时，反应应用程序停止工作我的问题是什么，我使用了 {news[0 ].title} 但我不知道它有什么问题，代码是：

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?

Answer 1

检查每个地方的数据是否可用。

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;

第二个最佳解决方案是使用切片方法

{[...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>
)})         
}

在reactjs中显示选定的json行数据

display selected row of json data in reactjs

json

jsonpath

reactjs