主页 / 问题 / 1564122
Accepted
rabbit
Asked:2024-01-31 18:48:06 +0000 UTC2024-01-31 18:48:06 +0000 UTC

从反应数组对象中获取带有键的子对象

  • 772

我有一个包含数组中的对象的钩子。该对象本身包含带有键的子对象：

const [Value, setValue] = useState([
      {
        Item1: [
          {
            SubItem11: [{test_key1: "text", test_key2: "another text"}],
            SubItem12: [{test_key1: "text", test_key2: "another text"}]
          }
        ],
        Item2: [
          {
            SubItem21: [{test_key1: "text", test_key2: "another text"}],
            SubItem22: [{test_key1: "text", test_key2: "another text"}]
          }
        ]
      }
])

请告诉我如何使用map. 另外，您能否展示一个仅访问特定对象键的示例？例如，如何仅访问SubItem12？

谢谢你！

reactjs

2 个回答

  1. 仅从 SubItem12 获取 test_key1 和 test_key2

    对于这样的任务，你的状态是极其不方便的……:(

    但你可以从中做出一个选择。

    //
function App() {
  const [value, setValue] = React.useState([
    {
      Item1: [
        {
          SubItem11: [{test_key1: "text", test_key2: "another text"}],
          SubItem12: [
            {test_key1: "text1", test_key2: "another text1"},
            {test_key1: "text2", test_key2: "another text2"},
          ]
        }
      ],
      Item2: [
        {
          SubItem21: [{test_key1: "text", test_key2: "another text"}],
          SubItem22: [{test_key1: "text", test_key2: "another text"}]
        }
      ]
    }
  ])
  const a = value.reduce(line, [])
  return <section>
    {a.map((o, i) => <p key={i}>{o.test_key1} - {o.test_key2}</p>)}
  </section>
}
//
function line(arr, o) {
  const a = o.Item1.map(o => o.SubItem12).flat()
  return [...arr, ...a]
} 

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    <div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    • 1
  2. Best Answer

    您能展示另一个如何获取所有最终密钥的示例吗？

    例如，您可以这样做......

    //
function App() {
  const [value, setValue] = React.useState([
    {
      Item1: [
        {
          SubItem11: [{test_key1: "text", test_key2: "another text"}],
          SubItem12: [
            {test_key1: "text1", test_key2: "another text1"},
            {test_key1: "text2", test_key2: "another text2"},
          ]
        }
      ],
      Item2: [
        {
          SubItem21: [{test_key1: "text", test_key2: "another text"}],
          SubItem22: [{test_key1: "text", test_key2: "another text"}]
        }
      ]
    }
  ])
  const a = value.reduce(line, [])
  return <section>
    {a.map((o, i) => <p key={i}>{o.test_key1} - {o.test_key2}</p>)}
  </section>
}
//
function line(arr, o) {
  const a = Object.values(o).flat().map(o => Object.values(o).flat()).flat()
  return [...arr, ...a]
} 

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    <div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    • 1

相关问题