如何从对象中提取多个键并打印输出答案

【问题标题】：How can i extract more than one key from an Object and print the output如何从对象中提取多个键并打印输出
【发布时间】：2019-11-18 15:26:58
【问题描述】：

如何从事件处理程序中的对象打印多个键？

这是我的代码的链接 - https://codesandbox.io/s/suspicious-hamilton-erkqv

在第 35 行，我使用对象“x”调用事件处理程序 ChangeName。我可以打印一个名为“name”（x.name）的键如何打印 x 对象的所有 3 个道具（名称、id、类型）？？

试图将 x 转换为带有 object.keys(x) 的数组，但是当我循环输出时，它给出了一个错误，说不能使用 map 函数

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


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

【问题讨论】：

标签： reactjs jsx react-hooks

【解决方案1】：

你的值不是一个数组，它是一个对象，所以你不能使用 map 方法，这就是它的工作原理：

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);

【讨论】：

Adel，这似乎适用于我在上面共享的链接上创建的虚拟代码。但是在我的实际代码中给了我错误..不同之处在于实际代码是从 API 中提取数据..大部分代码是相同的。这是我收到的错误“无法读取未定义的属性 'id'”

【解决方案2】：

运行代码：


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);

你需要设置值而不是值。

【讨论】：