Question

我有一个看起来像这样的功能组件：

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

const AutoFill = (props) => {
  const results = props.results || {}

  return (
    <ul className={Styles.searchUl}>
      {Object.entries(results).map(([key, value]) => {
        console.log('VALUE', value)
        console.log('VALUENAME', value.apple.name)
        return (
          <li className={Styles.searchLi}>
            <a className={Styles.searchA} href={value.apple.href} target='_blank' rel='noopener noreferrer' key={value.href}>
              {value.apple.name}
            </a>
          </li>
        )
      })}
    </ul>
  )
}

AutoFill.propTypes = {
  results: PropTypes.array
}

export default AutoFill

我也有一个Json文件，看起来像这样：

{
  "results": {
    "apple": {
      "name": "apple",
      "href": "https://www.apple.com/"
    },
    "armadillo": {
      "name": "armadillo",
      "href": "https://www.armadillo.com/"
    },
    "box": {
      "name": "box",
      "href": "https://www.box.com/"
    },
    "berserk": {
      "name": "berserk",
      "href": "https://www.berserk.com/"
    }
  }
}

使用console.log('Resultsssssss', (results[key].apple.name))时，我仅获得指定的苹果名称，该名称返回obv apple。因此，我想知道如何立即返回所有对象的名称，要在键入输入a的所有内容时在UL的autobar的搜索栏下的UL中显示它们，则应显示为建议：https://gyazo.com/006e856190e8e063934a07eb0725926e

< / p>

任何答案都会受到高度赞赏并得到调查。

Answer 1

您可以简单地从map函数中返回所有属性，而无需代码中的for循环

const data = {
  "results": {
    "apple": {
      "name": "apple",
      "href": "https://www.apple.com/"
    },
    "armadillo": {
      "name": "armadillo",
      "href": "https://www.armadillo.com/"
    },
    "box": {
      "name": "box",
      "href": "https://www.box.com/"
    },
    "berserk": {
      "name": "berserk",
      "href": "https://www.berserk.com/"
    }
  }
}

const res = Object.entries(data.results).map(([key, value]) => {
  return value.name;
});
console.log(res);

渲染所需要的是稍微重构HTML

const data = {
  "results": {
    "apple": {
      "name": "apple",
      "href": "https://www.apple.com/"
    },
    "armadillo": {
      "name": "armadillo",
      "href": "https://www.armadillo.com/"
    },
    "box": {
      "name": "box",
      "href": "https://www.box.com/"
    },
    "berserk": {
      "name": "berserk",
      "href": "https://www.berserk.com/"
    }
  }
}

const Styles = {}
const AutoFill = (props) => {
  const results = props.results || {}

  return (
    <ul className={Styles.searchUl}>
      {Object.entries(results).map(([key, value]) => {
        return (
            <li className={Styles.searchLi}>
              <a className={Styles.searchA} href={value.href} target='_blank' rel='noopener noreferrer' key={value.href}>
                {value.name}
              </a>
            </li>
        )
      })}
    </ul>
  )
}

ReactDOM.render(<AutoFill results={data.results} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />

Answer 2

当您在map函数中传递2个参数时，第一个参数是json文件的常规键，结果在您的情况下，第二个参数是此键下的内容。

尝试一下：

const AutoFill = (props) => {
  const results = props.results || []

  return (
    Object.entries(results).map(([name, content]) => {
      for (const key in content) {
        if (content.hasOwnProperty(key)) {
          console.log('Resultsssssss', (content[key].name))
        }
      }
    })
  )
}

Answer 3

首先，您要获取对象的所有值。 Object.values(results)将返回如下所示的数组：

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

现在，您可以使用map来获取名称：Object.values(results).map(x => x.name)。这将返回名称数组：['apple', 'armadillo', ...]。

使用reactjs获取json文件中许多属性的名称

3 个答案: