Question

我有一个名为autofill.json的json文件，它的创建目的是在按下时自动填充搜索栏。

autofill.json是一个测试文件，这就是为什么它看起来像这样。

        [
  {
    "a": {
      "apple": {
        "name": "apple",
        "href": "https://www.apple.com/"
      },
      "armadillo": {
        "name": "armadillo",
        "href": "https://www.armadillo.com/"
      }
    },
    "b": {
      "box": {
        "name": "apple",
        "href": "https://www.berserk.com/"
      },
      "berserk": {
        "name": "berserk",
        "href": "https://www.berserk.com/"
      }
    }
  }
]

然后将.json文件提取到名为FetchAndParseResults.js

的文件中。

    import fetch from 'isomorphic-fetch'

const FetchAndParseResults = (url) => {
  return fetch(url).then(response => {
    const parsedJson = response.json()
    return parsedJson
  })
}

export default FetchAndParseResults

所获取的数据用于searchcontainer.js中，所有内容均放置在其中，如搜索等。

    import React from 'react'
import Searchbar from './index.js'
import FetchAndParseResults from './FetchAndParseResults.js'

class SearchContainer extends React.Component {
    state = {
      results: []
    }

    performSearch = event => {
      return FetchAndParseResults('static/autofill.json').then(data => {
        this.setState({ results: data })
      })
    }

    render () {
      console.log('performSearch event', this.performSearch)
      console.log('data inside performSearch', this.state.results)
      return (
        <Searchbar
          performSearch={this.performSearch}
          results={this.state.results}
        />
      )
    }
    }

export default SearchContainer

然后要映射autofill.json中的数据，有一个名为autofill.js

的文件

    import React from 'react'
import PropTypes from 'prop-types'
import Styles from './searchbar.scss'

const AutoFill = (props) => {
  console.log('proppppppsss', props)
  const results = props.results || []

  return (
    <ul className={Styles.searchUl}>
      {results.map(({ name, href }) => (
        <li className={Styles.searchLi} key={href}>
          <a className={Styles.searchA} href={href} target='_blank' rel='noopener noreferrer' key={href}>
            {name}
          </a>
        </li>
      ))}
    </ul>
  )
}

AutoFill.propTypes = {
  results: PropTypes.array
}

export default AutoFill

searchcontainer.js中使用的（index.js）中的Searchbar组件

import React from 'react'
import Styles from './searchbar.scss'
import Icon from '../../components/icon/icon'
import Search from '../../components/form-input/search'
import AutoFill from './autofill'
import PropTypes from 'prop-types'

export default class Searchbar extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      className: Styles.input,
      icon: Styles.icon__wrapper,
      value: []
    }
    this.input = React.createRef()
  }

  openInput = () => {
    this.setState({
      className: Styles.input__active,
      icon: Styles.iconWidth
    }, () => {
      this.input.focus()
    })
    this.props.onOpen && this.props.onOpen()
  }

  closeInput = () => {
    this.setState({
      className: Styles.input,
      icon: Styles.icon__wrapper
    })
    this.props.onClose && this.props.onClose()
  }

  handleChange = event => {
    let value = event.target.value
    this.setState({ value })
    this.props.performSearch(value)
  }

  handleSubmit = event => {
    event.preventDefault()
  }

  render () {
    console.log('results', this.props.results)
    console.log('state.value', this.state.value)
    return (
      <div>
        <form onSubmit={this.handleSubmit} className={Styles.search}>
          <div className={this.state.icon}>
            <Icon className={Styles.icon__wrapper} iconName='faSearch' onClick={this.openInput} />
          </div>
          <Search autoComplete='off' value={this.state.value} onChange={this.handleChange} id='search' tabIndex='0' myref={input => { this.input = input }} className={this.state.className} onBlur={this.closeInput} placeholder='Search' />
        </form>
        <div>
          <AutoFill results={this.props.results} />
        </div>
      </div>
    )
  }
}

Search.propTypes = {
  performSearch: PropTypes.func,
  results: PropTypes.array
}

当我尝试通过搜索引用json文件中的内容时，收到错误消息，

获取http://localhost:3000/[object%20Object] 404（未找到）

和

about：1未捕获（承诺）语法错误：JSON中的意外令牌< 在位置0

第二个错误已通过解决

const parsedJson = response.text(

代替

const parsedJson = response.json()

以获取错误发生的位置/原因的更多信息。但是这样做我会收到错误，

searchcontainer.js：12未捕获（已承诺）TypeError：无法读取未定义的属性“结果”

我尝试从npm build运行它，而不是在无法修复的开发环境中运行它。

我读到模拟网址应该可以，但是我又想从文件而不是从网址访问它？

我们将不胜感激并寻求帮助。

Answer 1

该问题很可能是在fetch调用中。如果您看到错误消息GET http://localhost:3000/[object%20Object] 404 (Not Found) 您可以看到它正在尝试将对象附加到URL localhost:3000/。

您收到Unexpected token < in JSON at position 0错误，因为获取请求的响应可能是404页。 <很可能是<html>

的第一个字符

Answer 2

要访问React文件中的JSON对象，您可以像这样简单地进行导入；

val dataFrame = sparkSession.sql(queryTimeRange)
dataFrame.persist
dataSet.filter(dataSet("event_time").between(dtRangeStart, dtRangeEnd))

它将作为JSON对象返回。

我认为您错误地使用了import * as autofillData from 'autofill.json';包，如果您查看他们的源代码https://github.com/matthew-andrews/isomorphic-fetch/blob/master/fetch-npm-node.js#L5，他们正在接受一个URL来调用该API URL，这将返回一个promise或JSON对象，具体取决于您要调用的API的实现。

如果您要在此处更深入地研究开放源代码（https://github.com/matthew-andrews/isomorphic-fetch/blob/master/fetch-npm-node.js#L8），您会注意到isomorphic-fetch软件包正在使用另一个软件包isomorphic-fetch进行获取操作，该调用接受API URL和用于调用API的方法请求选项。（如此处所述； https://github.com/bitinn/node-fetch/blob/master/src/index.js#L34）

要继续进行测试，也许这可能是您想要的解决方案？

node-fetch

要有一个模拟URL占位符，我建议https://jsonplaceholder.typicode.com/来防止您的提取结果在测试模拟过程中返回意外错误。

希望这会有所帮助。

Answer 3

问题已经解决，主要问题是定义诸如const results = []之类的const名称，应该将其命名为const results = props.results || []。

代码也已更新，以防万一您遇到问题。

从react.js中的本地.json文件中获取数据会返回多个错误

3 个答案: