Question

我正在努力在我的加密数据映射上实现搜索过滤器。我不确定要在渲染中放入什么。我什至需要包含渲染器吗？因为我正在使用从我的static.config.js文件中调用的数据，该文件已经呈现了数据。我也将添加static.config.js文件，因为我认为这将有助于解决问题。

谢谢

render() { return( ) }

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

class Currencies extends React.Component {
  constructor() {
    super();
    this.state = {
      search: ''
    };
  }
  updateSearch(event) {
    this.setState({search: event.target.value.substr(0,20)});
  }
}
render() {
  return(

  )
}

export default withRouteData(({ currencies }) => (
  <div>
    <Link to="/">Quoinex</Link>
    <Link to="/qryptos"><b>Qryptos</b></Link>
    <form id="form">
      <input type="text" name="name" onChange={this.updateSearch.bind(this)} value={this.state.search} placeholder="BTC etc."  />
      <input className="sub" type="submit" />
    </form>
    <h1>Tokens</h1>
    <br />
    <table className="myTable">
      <tr>
        <th>Crypto/Token</th>
        <th>Min Withdrawal Qty</th>
        <th>Min Order Qty</th>
      </tr>
      { currencies.filter((currency) => {return currency.name.indexOf(this.state.search) !== -1;} ).map(currency => (
        <tr key={currency.currency}>
          <td id="tokenName">{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: '/',
        component: 'src/containers/Marketsquoinex',
        getData: () => ({
          productsquoinex,
        }),
        children: productsquoinex.map(product => ({
          path: `/product/${product.id}`,
          getData: () => ({
            product,
          }),
        })),
      },
      {
        path: '/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 {

    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>
      )
    }
  },
}

尝试在我的阵列映射上实现过滤器功能

0 个答案: