[英]How do I display my returned props values that is stored locally?
I want to be able to display the dog's profile information (props-values) when I press on the dogs name.当我按下狗的名字时,我希望能够显示狗的个人资料信息(道具值)。 But I keep getting this error:
但我不断收到此错误:
caught Error: StartPage(...): Nothing was returned from render.
捕获的错误:StartPage(...): 渲染没有返回任何内容。 This usually means a return statement is missing.
这通常意味着缺少 return 语句。 Or, to render nothing, return null.
或者,不渲染任何内容,返回 null。
//(profile.js)
import React from "react";
export class ViewProfile extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<p>Name: {this.props.dog.name}</p>
<p>Nick: @{this.props.dog.nick}</p>
<p>Age: {this.props.dog.age}</p>
<p>Bio: {this.props.dog.bio}</p>
<p>Friends</p>
{this.props.dog.friends.length > 0 && this.props.dog.friends.map(friend => <div><span key={friend}>{friend}</span> <span onClick={() => this.props.switchDogs(friend)}>X</span></div>)}
<a href="" onClick={(e) => this.props.goBack(e)}>Go back</a>
</div>
)
}
}
//(start.js)
import React from "react";
import { CreateProfile } from './create';
import { ViewProfile } from './profile';
export class StartPage extends React.Component {
state = { currentPage: "start", selectedDog: "", dogs: [] }
componentDidMount() {
var allDogs = JSON.parse(localStorage.getItem('dogs'));
if (allDogs) {
this.setState({
dogs: allDogs
});
}
}
switchDogs(dog) {
this.setState(prevState => ({ ...prevState, currentPage: "selectedProfile", selectedDog: dog }))
}
switchPath(event) {
event.preventDefault()
this.setState({ currentPage: "create" })
}
getStartPage = () => {
return <div>
<h4>Dogbook</h4>
<br />
<br />
<h3>Users</h3>
{this.state.dogs && this.state.dogs.map(dog => <span className="dog-list" onClick={() => this.switchDogs(dog)}>@{dog.name}</span>)}
<br />
<a href="" onClick={(e) => this.switchPath(e)}> Create new dog </a>
</div>
}
getPage() {
switch (this.state.currentPage) {
case "start": return this.getStartPage()
case "create": return <CreateProfile goBack={() => this.switchPath} />
case "selectProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
default: this.getStartPage()
}
}
render() {
return this.getPage()
}
}
As I see it, you have 2 problems in your code:如我所见,您的代码中有两个问题:
getPage()
function, doesn't actually return anything.getPage()
function 上的默认情况实际上并没有返回任何内容。selectedProfile
page and your switch is returning your ViewProfile
component when currentPage is selectProfile
, you would like to change both options to the same one.selectedProfile
页面,当 currentPage 为selectProfile
时,您的开关将返回您的ViewProfile
组件,您希望将两个选项更改为相同的选项。 Your fixed code would be:您的固定代码将是:
(profile.js) (profile.js)
import React from "react";
export class ViewProfile extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<p>Name: {this.props.dog.name}</p>
<p>Nick: @{this.props.dog.nick}</p>
<p>Age: {this.props.dog.age}</p>
<p>Bio: {this.props.dog.bio}</p>
<p>Friends</p>
{this.props.dog.friends.length > 0 && this.props.dog.friends.map(friend => <div><span key={friend}>{friend}</span> <span onClick={() => this.props.switchDogs(friend)}>X</span></div>)}
<a href="" onClick={(e) => this.props.goBack(e)}>Go back</a>
</div>
)
}
}
(start.js) (start.js)
import React from "react";
import { CreateProfile } from './create';
import { ViewProfile } from './profile';
export class StartPage extends React.Component {
state = { currentPage: "start", selectedDog: "", dogs: [] }
componentDidMount() {
var allDogs = JSON.parse(localStorage.getItem('dogs'));
if (allDogs) {
this.setState({
dogs: allDogs
});
}
}
switchDogs(dog) {
this.setState(prevState => ({ ...prevState, currentPage: "selectedProfile", selectedDog: dog }))
}
switchPath(event) {
event.preventDefault()
this.setState({ currentPage: "create" })
}
getStartPage = () => {
return <div>
<h4>Dogbook</h4>
<br />
<br />
<h3>Users</h3>
{this.state.dogs && this.state.dogs.map(dog => <span className="dog-list" onClick={() => this.switchDogs(dog)}>@{dog.name}</span>)}
<br />
<a href="" onClick={(e) => this.switchPath(e)}> Create new dog </a>
</div>
}
getPage() {
switch (this.state.currentPage) {
case "start": return this.getStartPage()
case "create": return <CreateProfile goBack={() => this.switchPath} />
case "selectedProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
default: return this.getStartPage()
}
}
render() {
return this.getPage()
}
}
didn't look at much but check your getPage() function.没看太多,但检查你的 getPage() function。 I think your default case should have a return keyword
我认为您的默认案例应该有一个 return 关键字
getPage() {
switch (this.state.currentPage) {
case "start": return this.getStartPage()
case "create": return <CreateProfile goBack={() => this.switchPath} />
case "selectProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
default: this.getStartPage()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.