反應：使用JSX時無效的道具類型鏈接

Question

以下是我正在做的傻瓜版

當單擊“跳過”按鈕時，我從隨機的“頁面”中獲取信息，然后使用this.state進行顯示。

import React from "react"
import { Link } from 'react-router'

const MyComponent = React.createClass({
  getRandomPage () {
    var pages = [
      {
        link: "/1_page_one",
        title: "title one",
        description: "Description1"
      },
      {
        link: "/2_page_two",
        title: "title Two",
        description: "Description2"
      },
      {
        link: "/3_page_three",
        title: "title three",
        description: "Description3"
      }
    ]
    var randomNum = Math.floor(Math.random() * pages.length);
    this.setState({page: pages[randomNum]});
  },
  getInitialState () {
    return {
      page: "hi"
    }
  },
  render () {
      console.log(this.state.page.link);
    return (
      <div>
        <div>
          <li><Link to="/1_page_one"><button type="submit">To Page</button></Link></li>
          <li><button onClick={this.getRandomPage} type="submit">Skip</button></li>
        </div>
      </div>
      <div>
        <h1>{this.state.page.title}</h1>
        <h2>Description</h2>
        <div>
          {this.state.page.description}
        </div>
      </div>
    );
  }
});

export default MyComponent;

一切似乎都正常，除非我嘗試更改

 <li><Link to="/1_page_one"><button type="submit">To Page</button></Link></li>

至

 <li><Link to={this.state.page.link}><button type="submit">To Page</button></Link></li>

我收到一條錯誤消息：

main.js:8715 Warning: Failed prop type: Invalid prop `to` supplied to `Link`.
    in Link (created by ChallengeBoxes)
    in ChallengeBoxes (created by MainContent)
    in div (created by MainContent)
    in MainContent (created by RouterContext)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router

但是當檢查以了解其價值時

console.log（this.state.page.link）;

狀態鏈接是否為正確的字符串，例如“ / 1_page_one”？

怎么了

Answer 1

在第一個渲染上，您的page狀態沒有任何link屬性，因此為Link組件提供了一個null （無效）值。

您可以通過在初始值中添加一個來解決此問題：

      getInitialState () {
        return {
          page: {
            title: "hi",
            description: "Homepage",
            link: "/0_home"
          }
        }
      },

Answer 2

this.setState({page: pages[randomNum]})組件時，不會調用getRandomPage() this.setState({page: pages[randomNum]}) 。 因此，當this.state.page.link尚未undefined時，初始渲染將遇到錯誤，但是一旦您按下按鈕，您的this.state.page.link包含一些內容。

更改您的初始狀態可能是：

getInitialState () {
    return {
      page: {
         title: 'something...',
         link: '/1_page_one',
         description: 'something...'
      }
    }
  }