时间戳

首页 > 解决方案 > 为什么这个返回状态是未定义的？

javascript - 为什么这个返回状态是未定义的？

问题描述

所以我正在尝试为来自交易所的一组加密货币数据构建一个过滤器，即。（最小订单数量），但我想按输入的内容进行过滤。为了实现这一点，我为 state.search 写了一个值作为“测试”，看看它是否通过。为什么这个返回状态未定义？下面是 currency.js 文件的代码。我正在使用 react-static （一个站点生成器）来构建我的站点并使用他们的模板进行我自己的调整。

下面是 currency.js 文件的代码。

import React  from 'react'
import { withRouteData, Link } from 'react-static'

//


export default withRouteData(({ currencies }) => (

  <div>

    <Link to="/markets/quoinex">Quoinex</Link>
        <Link to="/markets/qryptos"><b>Qryptos</b></Link>
        <form>
          <input type="text" name="name" placeholder="BTC etc."/>
          <input className="sub" type="submit" value={this.state.search} />
        </form>

    <h1>Tokens</h1>
    <br />
    <table>
        <tr>
            <th>Crypto/Token</th>
            <th>Min Withdrawal Qty</th>
            <th>Min Order Qty</th>
        </tr>

        {currencies.slice(0,52).map(currency => (
             <tr key={currency.currency}>
             <td>{currency.currency}</td>
             <td>{currency.minimum_withdrawal}</td>
             <td>{currency.minimum_order_quantity}</td> 
         </tr>
      ))}
    </table>
    <table className="table2">
        <tr>
            <th>Crypto/Token</th>
            <th>Min Withdrawal Qty</th>
            <th>Min Order Qty</th>
        </tr>

        {currencies.slice(52,).map(currency => (
             <tr key={currency.currency}>
             <td>{currency.currency}</td>
             <td>{currency.minimum_withdrawal}</td>
             <td>{currency.minimum_order_quantity}</td> 
         </tr>
      ))}
    </table>


  </div>
))

以及 static.config.js 文件的代码。

import axios from 'axios'
import React, { Component } from 'react'
import { ServerStyleSheet } from 'styled-components'

export default {
  getSiteData: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const { data: productsquoinex } = await axios.get('https://api.quoine.com/currencies')
    const {data: currencies } = await axios.get('https://api.qryptos.com/currencies')
    return [

      {
        path: '/markets/quoinex',
        component: 'src/containers/Marketsquoinex',
        getData: () => ({
          productsquoinex,
        }),
        children: productsquoinex.map(product => ({
          path: `/product/${product.id}`,
          getData: () => ({
            product,
          }),
        })),
      },
      {
        path: '/markets/qryptos',
        component: 'src/containers/Currencies',
        getData: () => ({
          currencies,
        }),
        children: currencies.map(currency => ({
          path: `/currencies/${currency}`,
          getData: () => ({
            currency,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  renderToHtml: (render, Comp, meta) => {
    const sheet = new ServerStyleSheet()
    const html = render(sheet.collectStyles(<Comp />))
    meta.styleTags = sheet.getStyleElement()
    return html
  },
  Document: class CustomHtml extends Component {
    constructor() {
    super();
    this: {
      [x: string]: 'test',
      any:any,
      search: string
    },
  }
    render () {


      const {
        Html, Head, Body, children, renderMeta
      } = this.props


      return (
        <Html>
          <Head>
            <meta charSet="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            {renderMeta.styleTags}
          </Head>
          <Body>
          {children}
          </Body>
        </Html>
      )
    }
  },
}

我知道 state 的构造函数应该直接在currency.js 文件中，但我不知道该怎么做。谢谢

标签： javascriptarraysreactjsjsx

解决方案

推荐阅读