热门从对象数组中获取 object 密钥

Question

我有这个名为 name[] 的对象数组（例如），如下面打印的控制台日志所示。

对于每个登录的用户，他的名字将被添加到带有 name:key 的选项中，并添加另一个包含所有数据的 object。 （这就是我到现在为止的工作方式，可能有更清洁的方法，但现在我已经接近得到我需要的东西，所以不需要重新处理那个 imo）。

0:
id: "users"
name: {Dick: true, Harry: true, Tom: true}
__proto__: Object
1:
id: "users"
name: {Dick: true, Harry: true, Tom: true}
__proto__: Object
2:
id: "users"
name: {Dick: true, Harry: true, Tom: true}
__proto__: Object

我的目标是列出 React 组件中的不同名称。 当我尝试按原样通过数组进行 map 时，我得到“未捕获的错误：对象作为 React 子对象无效” - 因为其中的数组/对象当然不是我需要的格式。

我需要在名称数组上 map 一次以将列表添加到浏览器，但现在名称位于 object 中，这是数组中对象的第二个值...

我想我只需要使用原始数组中的一个对象（因为它们都是相同的），忽略“id”键，然后通过包含不同名称的 object map。

这对我来说有点复杂，从其他数据中分离/到达目标 object 是很棘手的。

如果您对如何做有任何想法，我愿意接受建议。

谢谢你。 关于我如何尝试将数据返回到浏览器，请参阅下面我当前的尝试，它给出了上述错误。

 return <div className='container'>

      {/* title */}
      <div className='titleDiv'>
        <h1>React Message App</h1>
        <p className='usersLoggedIn'>Logged in: </p>
        {
          names.map(item => {
            return (
              <p className='usersLoggedIn'>
                {(item.name === this.state.name ? ' ' : item.name)}
              </p>
            )
          })
        }
      </div>

Answer 1

          names.map(item => {
            return (
              <p className='usersLoggedIn'>
                {(item.name === this.state.name ? ' ' : item.name)}
              </p>
            )
          })

您将返回嵌套在 p 标记内的item.name ，即 object。 我正在编辑我的答案以实现您想要的解释：

          names.map((item,i) => {
            return (
              <p className='usersLoggedIn'>
                {(item.name === this.state.name ? ' ' : Object.keys(item.name)[i])}
              </p>
            )
          })

这假设您的数组，并且您的 object 具有相同数量的元素，这是我从您的 object 结构中了解到的。 我仍然必须警告您，这是非常复杂的，您可能需要考虑重新构建您的 object，或者至少重新构建您的 map function：

          Object.keys(names[0].name).map(item => {
            return (
              <p className='usersLoggedIn'>
                {item}
              </p>
            )
          })

Answer 2

在遍历 names 数组时的 render 方法中， item.name由内部 object 组成，例如{Dick: true, Harry: true, Tom: true} ，它在<p>标记内呈现。 这是无效的，因为 object 不能是 p 标签的子节点，更不用说任何 dom 元素了。

如果要渲染名称数组中每个 object 的所有内部名称，则必须从内部 object {Dick: true, Harry: true, Tom: true}中获取必要的数据，然后渲染它。

例子

 return <div className='container'>

  {/* title */}
  <div className='titleDiv'>
    <h1>React Message App</h1>
    <p className='usersLoggedIn'>Logged in: </p>
    {
      names.map(item => {
        return (
          <p className='usersLoggedIn'>
            { // parse the inner object to get all the name keys
               Object.keys(item.name).map((innerItem) => <span>{innerItem}&nbsp;</span>)
            }
          </p>
        )
      })
    }
  </div>

Answer 3

这是你需要的吗？

它能做什么：

• 过滤所有名称（数组中每个 object 的name属性中的键）
• 不等于state.name的显示名称

const data = [
  {
    id: "users",
    name: { Dick: true, Harry: true, Tom: true }
  },
  {
    id: "users",
    name: { Dick: true, Harry: true, Tom: true }
  },
  {
    id: "users",
    name: { Dick: true, Harry: true, Tom: true }
  }
];

const getAllUsers = () => {
  return data.reduce((arr, obj) => {
    const names = Object.keys(obj.name);
    const newNames = names.filter(name => {
      return !arr.includes(name);
    });
    return arr.concat(newNames);
  }, []);
};

class App extends React.Component {
  state = {
    name: "Harry"
  };

  render() {
    return (
      <div>
        <h1>Header</h1>
        {getAllUsers().map(user => (
          <p>{user === this.state.name ? "" : user}</p>
        ))}
      </div>
    );
  }
}