Как я могу извлечь более одного ключа из объекта и распечатать вывод - PullRequest
Новая
       21

Как я могу извлечь более одного ключа из объекта и распечатать вывод

0 голосов
/ 09 июля 2019

Как я могу напечатать более одного ключа из объекта внутри обработчика событий?

вот ссылка на мой код - https://codesandbox.io/s/suspicious-hamilton-erkqv

в строке номер 35 я вызываю обработчик события ChangeName с объектом "x".Я могу напечатать один ключ с именем 'name' (x.name). Как я могу напечатать все 3 реквизита объекта x (name, id, type) ??

пытался преобразовать x в массив сobject.keys (x), но когда я перебираю вывод, он выдает ошибку, говоря, что не может использовать функцию карты 

 const ChangeName = x => {
    setvalue(x.name);
  };


  <div>{value}</div> // display the results

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Рабочий код: 


import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [posts, setposts] = useState([]);
  const [values, setvalue] = useState([]);

  useEffect(() => {
    const posts = [
      {
        id: 1,
        name: "Name 1",
        type: "Type 1"
      },
      {
        id: 2,
        name: "Name 2",
        type: "Type 2"
      },
      {
        id: 3,
        name: "Name 3",
        type: "Type 3"
      },
      {
        id: 4,
        name: "Name 4",
        type: "Type 4"
      }
    ];

    setposts(posts);
  }, []);

  const ChangeName = x => {
    console.log(Object.values(x));
    Object.values(x).map(k => setvalue(k));
  };

  return (
    <div>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.name},{post.type}
            <button onClick={ChangeName.bind(this, post)}>More Info</button>
          </li>
        ))}
      </ul>

      <div>{values}</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вам необходимо установить значения, а не значения.

0 голосов
/ 09 июля 2019

ваше значение не является массивом, это объект, поэтому вы не можете использовать метод карты, и вот как он работает: 

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [posts, setposts] = useState([]);
  const [value, setvalue] = useState("");

  useEffect(() => {
    const posts = [
      {
        id: 1,
        name: "Name 1",
        type: "Type 1"
      },
      {
        id: 2,
        name: "Name 2",
        type: "Type 2"
      },
      {
        id: 3,
        name: "Name 3",
        type: "Type 3"
      },
      {
        id: 4,
        name: "Name 4",
        type: "Type 4"
      }
    ];

    setposts(posts);
  }, []);

  const ChangeName = x => {
    setvalue(x);
  };

  return (
    <div>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.name},{post.type}
            <button onClick={() => ChangeName(post)}>More Info</button>
          </li>
        ))}
      </ul>

      <div>
        {value.name}
        {value.id}
        {value.type}
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
...