个人中心
gpt4 book ai didi

javascript - preact 组件中未定义的标签

转载 作者：行者123 更新时间：2023-11-28 14:48:18 26 4
gpt4 key购买 nike

我对 preact 很陌生，我正在尝试在 preact 中实现 PWA。特别是，此示例应显示人员 ID 列表。

这是index.html页面:

<!DOCTYPE html>
<html>
  <head>
    <!--Some elements here-->
  </head>
  <body>
    <div id="root">
    </div>
    <script>
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js', { scope: '/' })
        .then(function(registration) {
              console.log('Service Worker Registered');
        });
      navigator.serviceWorker.ready.then(function(registration) {
         console.log('Service Worker Ready');
      });
    }
    </script>
    //some other scripts
  </body>
</html>

进入 src/文件夹，有index.js:

import { h, render, Component } from 'preact';
import request from 'superagent';
import Router from 'preact-router';
import Home from './components/homepage';
import PeopleList from './components/people/PeopleList';
import PeopleItem from './components/people/PeopleItem';
import Navigation from './components/navigation';

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentURL: '/',
      people: {},
    };
    this.setPeople = this.setPeople.bind(this);
    this.onRouteChange = this.onRouteChange.bind(this);
  }

  setPeople({results})
  {
    this.setState({people: results});
  }

  onRouteChange() {
    const pageElement = document.querySelector('.page');
    if (pageElement) {
      pageElement.scrollTop = 0;
      this.setState({
        currentURL: window.location.pathname,
      });
      if(this.state.currentURL == '/people')
      {
        var that = this;
        //webservice api request
        const url = 'https://api.mysite.it/v2/index.php/api/events/people_api_new?id_event=<int>';
        fetch(url,{
          method: 'get',
          headers: {
            //my headers,
          },
        }).then(function(response)
        {
          if(response.status !== 200)
          {
            console.log('server problem');
            return;
          }
          return response.json();
        }).then(function(j){
          console.log(j.people);
          that.setState(
            {
              people: j.people,
            }
          );
        });
        console.log(this.state.people);
      }
      else
      {
         //other
      }
    }
  }


  render(props, state) {
    console.log('render people ' + state.people);
    return (
      <main class="main">
        <div class="page">
            <Router onChange={this.onRouteChange}>
            <Home path="/" />
            <PeopleList path="/people" people={state.people} />
          </Router>
        </div>
        <Navigation currentURL={state.currentURL} />
      </main>
    );
  }
}

render(<Main />, document.getElementById('root'));

我可以忽略导航元素(这是导航菜单，当我单击 People 元素时，onRouteChange 事件应该调用 api，然后显示该页面。

这是 PeopleList 元素(文件 PeopleList.js):

import { h, Component } from 'preact'
import PeopleItem from './PeopleItem'

const PeopleList = ({
  people
}) => (

         <div class="listPeople">
         {
            $.each(people, function(k,v)
            {
                 <PeopleItem person = {v.people_id} />
            })
         }
         </div>
)

export default PeopleList

在这种情况下，人是一个结构化的对象:

{"1":{"user_id":"1"},"2":{"user_id":"2"} //JSON string of people object came from webservice api

最后，这是 PeopleItem 元素:

import { h, Component } from 'preact'

const PeopleItem = (person) => (
            <div>
            {
                person
            }
            </div>
    )

export default PeopleItem

当我进入人员页面时，PWA 能够读取来自服务器 api 的人员对象，但我得到的不是 PeopleItem 元素，而是未定义的标记，如下所示:

<div id="root">
<main class="main">
<div class="page>
<div class="listPeople">
<undefined>
</undefined>
</div>
</div>
</main>
<!-- Navigation element -->
</div>

为什么我在页面上看到未定义的标签？我应该查看:

<div>1</div>
<div>2</div>

而不是:

<undefined></undefined>

最佳答案

问题出在这里:const PeopleItem = (person)

按照你的写法，person 是 props 对象。您需要访问该对象内的person。

为此，您可以像这样解构 props 对象；

const PeopleItem = ({ person }) => (
  <div>{person}</div>
)

或者像这样编写 PeopleItem:

const PeopleItem = (props) => (
  <div>{props.person}</div>
)

关于javascript - preact 组件中未定义的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45547559/

26 4 0
文章推荐： javascript - 无法理解为什么我的 Javascript 函数不起作用？
文章推荐： css - 滚动表格时的两个固定列
文章推荐： html - 用 CDN 链接和 SCSS 覆盖 bootstrap 4
文章推荐： swift - Snapshot.value 在 setValueForKeys 上崩溃
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com