Получить дочерний объект с ключом из объектов массива react

Question

У меня есть во такой хук, содержащий объект в массиве. Сам объект содержит дочерние объекты с ключами:

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?

Спасибо!

Answer 1

Получить test_key1 и test_key2 только из SubItem12

Для такой задачи твой стейт максимально неудобен... :(

Но вот такой вариант можно из него сварганить.

//
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>

Answer 2

можете показать еще один пример того, как получить все конечные ключи?

Например вот так это можно сделать...

//
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>

БЛОГ НА HUSL

Получить дочерний объект с ключом из объектов массива react

Ответы (2 шт):