反应：使用 JSX 时，道具类型链接无效答案

【问题标题】：React: Invalid prop type Link when using JSX反应：使用 JSX 时，道具类型链接无效
【发布时间】：2016-08-29 13:21:06
【问题描述】：

下面是我正在做的事情的简化版

单击“跳过”按钮时，我从一个随机“页面”获取信息，然后使用 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”？

怎么了？

【问题讨论】：

标签： javascript xml reactjs

【解决方案1】：

在第一次渲染时，您的page 状态没有任何link 属性，因此null（无效）值被赋予Link 组件。

您可以通过在初始值中添加一个来解决此问题：

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

【讨论】：

【解决方案2】：

在安装组件时不会调用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...'
      }
    }
  }

【讨论】：