Question

当我的React应用程序部署在Heroku上时，我得到的.map不是函数错误。虽然在我的本地计算机上运行良好。我正在尝试在this.state.data上映射的行上发生错误。内 Modal.Content标签。

我已经检查过this.state.data确实是一个数组，并且如上所述，它可以在我的本地主机服务器上工作。我不知道为什么部署时它不起作用。任何帮助，将不胜感激。谢谢。

import React from 'react'
import { Form } from 'semantic-ui-react'
import { Button, Header, Modal, Message, List, Label } from 'semantic-ui-react'
import axios from 'axios'

const styles = {
  formBox: {
    margin: 5
  },
  inputBox: {
    marginTop: 5,
    marginBottom: 5
  }
}

export default class LogHistoryForm extends React.Component {
  state = {
    data: [],
    invalid: false,
    modal: false
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    if(!this.state.username) return this.setState({invalid: true})
    axios.get(`/api/exercise/log?username=${this.state.username}&from=${this.state.from}&to=${this.state.to}`)
      .then(res => {
        if(res.data === 'user not found') return this.setState({invalid: true})
        this.setState({
           data: res.data,
           invalid: false,
           modal: true  
        })
        console.log(res)
      })
      .catch(err => console.log(err))
  }

  closeModal = () => {
    this.setState({ modal: false })
  }

  render() {

    return (
      <Form style={styles.formBox} onSubmit={this.handleSubmit} success error autocomplete='off' >
        <Header as='h3' textAlign='left'>
          Search Exercise History
        </Header>
        <Form.Field>
          <input 
            style={styles.inputBox} 
            type='text'
            name='username'
            placeholder='Username  *Required' 
            onChange={this.handleChange} />
          <Label as='a' color='orange' ribbon>From</Label>
          <input 
            style={styles.inputBox} 
            type='date'
            name='from'
            placeholder='From' 
            onChange={this.handleChange} />
          <Label as='a' color='orange' ribbon>To</Label>
          <input 
            style={styles.inputBox} 
            type='date'
            name='to'
            placeholder='To' 
            onChange={this.handleChange} />
        </Form.Field>
        { this.state.invalid && <Message error header='User not found' content="Please make sure you entered in your username" /> }
        <Button primary data-tooltip='Will display a maximum of 20 results'>Search</Button>
        <Modal open={this.state.modal} onClose={this.closeModal} closeIcon>
          <Header content='History' />
          <Modal.Content>
            {!this.state.data.length && <div>No history found</div>}
            {this.state.data.length && this.state.data.map(item =>
              <List key={item._id}>
                <List.Item key={item._id+1}> {item.date.split('T')[0].split('-').reverse().join('/')} </List.Item>
                <List.Item key={item._id+2}> {item.description} </List.Item>
                <List.Item key={item._id+3}> {item.duration ? item.duration + ' mins' : ''} </List.Item>
                <List.Item key={item._id+4}> {item.reps ? item.reps + ' reps' : ''} </List.Item>
                <List.Item key={item._id+5}> {item.weight ? item.weight + ' kgs' : ''} </List.Item>
              <hr />
              </List>
            )}
          </Modal.Content>
        </Modal>
      </Form> 
    )
  }
}

这是端点的服务器端代码

// end point for getting user's exercise log
app.get('/api/exercise/log', (req, res) =>{
  const username = req.query.username
  const from = Date.parse(req.query.from)
  const to = Date.parse(req.query.to)

  if(!username) return res.json('username required')

  User.findOne({ username }, { log: { $slice: 20 } })
    .exec((err, user) => {
      if (err) return res.json(err)
      if (!user) return res.json('user not found')
      let output;
      if (from && to) {output = user.log.filter(item => Date.parse(item.date) >= from && Date.parse(item.date) <= to)}
      else if (from) {output = user.log.filter(item => Date.parse(item.date) >= from)}
      else if (to) {output = user.log.filter(item => Date.parse(item.date) <= to)}
      else {output = user.log}
      output.sort((obj1, obj2) => obj2.date - obj1.date)
      res.json(output)
    })
})

Answer 1

s.a.createElement(l.h.Content, null, !this.state.data.length && s.a.createElement("div", null, "No history found"), this.state.data.length && this.state.data.map(function(e) {})

在这一行中您遇到错误。我的猜测是api返回的是字符串而不是数组。

TypeError：this.state.data.map在Heroku上部署时不是函数，但在本地工作

1 个答案: