Question

我只需要显示使用API发布在我网站上的最新内容，即可在我的本机移动应用程序主页上显示这些内容。但是当我运行我的应用程序时，它显示Typeerror：undefined不是this.state.persons [0] .p_pages_title的对象。

以下是我的json数据的示例：

{
statuc: "SUCCESS",
data: - [
- {
p_pages_id: "6591",
p_pages_title: "د شوال شپږ روژې نیول (الحدیث).",
p_pages_author: "تعلیم الاسلام",
p_pages_date: "2019-06-08 05:45:11",

},
- {
p_pages_id: "10122",
p_pages_title: "د رسول اللهﷺ تبسم (الحدیث)",
p_pages_author: "تعلیم الاسلام ",
p_pages_date: "2019-06-04 20:10:43",

},
- {
p_pages_id: "2798",
p_pages_title: "تر درو ورځو زیاته خوابدتیا (الحدیث).",
p_pages_author: "تعلیم الاسلام",
p_pages_date: "2019-06-04 10:25:03",

},
- {
p_pages_id: "3871",
p_pages_title: "د لیلة القدر د شپې دعا (الحدیث)",
p_pages_author: "تعلیم الاسلام ویب پاڼه",
p_pages_date: "2019-05-29 09:06:47",

},
- {
p_pages_id: "10095",
p_pages_title: "د روژې د هري شپې اعلان (الحدیث).",
p_pages_author: "تعلیم الاسلام ویب پاڼه",
p_pages_date: "2019-05-15 05:41:06",

},
- {
p_pages_id: "5357",
p_pages_title: "د ریان دروازه د روژاتي لپاره (الحدیث).",
p_pages_author: "تعلیم الاسلام راډیو",
p_pages_date: "2019-05-12 04:59:24",

},

这是代码：

class DailyHadith extends Component {

   constructor(props) {
    super(props);
    this.state = {
      persons: [],
      isLoading: true,

    };
  }

  async componentDidMount() {


    axios
      .get(`address of the json data`)
      .then(res => {
        // console.log(res);
        this.setState({
          isLoading: false,
          persons: res.data.data
        });
      });


  }

//这是渲染方法：

render(){

return (

<Card>


<CardItem>

<Text>{this.state.persons[0].p_pages_title}</Text>

</CardItem>

</Card>
    );
    }
    }

}

Answer 1

您的数据具有一个名为：p_pages_date的字段，可用于获取最新数据。创建一个新的状态作为latestData。然后，您可以使用以下代码过滤最新数据。

       axios.get(`address of the json data`)
           .then(res => {
             // console.log(res);
             let latestDataValue = {};
             if(res.length){
             c = res.reduce((m,v,i) => (v.p_pages_date > 
              m.p_pages_date) && i ? v : m).ModDate;
            }
            this.setState({
                isLoading: false,
                persons: res.data.data,
                latestData:latestDataValue
            });
         });

现在在您的渲染方法中调用this.state.latestData.p_pages_title而不是this.state.persons [0] .p_pages_title

希望这会有所帮助。

自动仅显示最新主题

1 个答案: