我是新手，我正在尝试实施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'));
我可以忽略Navigation元素（这是导航菜单，当我单击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的人员对象，但是我得到的是undefined标签，而不是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>
)