时间戳

首页 > 解决方案 > 将对象带到另一个文件时对象嵌套

reactjs - 将对象带到另一个文件时对象嵌套

问题描述

我是新手，正在尝试一些东西，但是遇到了这个问题，当我在另一个文件中调用一个对象时，我继承了这些值等，它就像一个新对象，然后将原始对象放入那个新对象中。它可能被解释为一团糟，但我会用一些例子说明清楚。有人可以向我解释这是如何工作的吗？

这是基础文件。第一条路线是它发生的地方，您会看到我想将项目提供给该文件。 在这里记录项目时的结果是 items { ... } （我想要的）

import React, { Component } from "react";
import "./App.css";
import Home from "./components/Home.jsx";
import AboutUs from "./components/AboutUs.jsx";
import Contact from "./components/Contact.jsx";
import Overview from "./components/Overview.jsx";
import Nav from "./components/Nav.jsx";
import { Switch, Route } from "react-router-dom";

class App extends Component {
  constructor() {
    super();
    this.state = { items: { 1551204339467: "Hi", 1551204339469: 
    "123Test" } };
  }

  render() {
    const { items } = this.state;
    return (
      <>
        <Nav />

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={AboutUs} />
          <Route path="/overview" render={() => <Overview items={items} 
          />} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </>
    );
  }
}

export default App;

这是它给我一个嵌套对象的文件，如 items: { items: { ... }} 

import React from "react";
import ItemsList from "./ItemsList.jsx";

const Overview = items => {
  console.log(items);

  return (
    <>
      <h1>Overview</h1>
      <ItemsList items={items} />
    </>
  );
};

export default Overview;

有人可以解释一下这是自动嵌套的原因吗？天呐！

标签： reactjs

解决方案

在您的第三条路线中-

<Route path="/overview" render={() => <Overview items={items} 
      />} />

您正在使用render方法而不是component方法，这三种方法中都可以使用<Route>

使用render，您可以传递一个在位置匹配时将调用的函数。

那么你的功能在这里做什么？它返回一个component你正在传递的物品道具，其值为{items}

const { items } = this.state;

在这里，您正在使用 ES6 解构。基本上，从状态对象中获取项目本身就是另一个对象。

您的Overview组件将接收Items具有Items对象值的道具，以及其他路由道具，如匹配、历史、位置。

来源

推荐阅读