如何顯示本地存儲的返回的道具值？

Question

當我按下狗的名字時，我希望能夠顯示狗的個人資料信息（道具值）。 但我不斷收到此錯誤：

捕獲的錯誤：StartPage(...): 渲染沒有返回任何內容。 這通常意味着缺少 return 語句。 或者，不渲染任何內容，返回 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()
    }

}

Answer 1

如我所見，您的代碼中有兩個問題：

1. 看起來您在getPage() function 上的默認情況實際上並沒有返回任何內容。
2. 單擊狗的名字將您轉到selectedProfile頁面，當 currentPage 為selectProfile時，您的開關將返回您的ViewProfile組件，您希望將兩個選項更改為相同的選項。

您的固定代碼將是：

(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 "selectedProfile": return <ViewProfile dog={this.state.selectedDog} goBack={() => this.switchPath} goToDog={() => this.switchDogs} />
          default: return this.getStartPage()
      }
  }

  render() {
      return this.getPage()
  }
}

Answer 2

沒看太多，但檢查你的 getPage() function。 我認為您的默認案例應該有一個 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()
    }
}