在javascript中解构嵌套对象(反应)

时间:2018-05-02 15:07:28

标签: javascript arrays json reactjs

if (item.Name == "Privacy preferences")
            {
                switch (Device.RuntimePlatform)
                {
                    case Device.iOS:
                        Device.OpenUri(
                          new Uri(FORGOT WHAT TO PUT IN HERE .. APP/SETTINGS?);
                        break;
                    case Device.Android:
                        Device.OpenUri(
                          new Uri();
                        break;
                }

日志:

const [book, ...rest] = this.state.details;
console.log(JSON.stringify(book, null, 2));

我想渲染:

{
  genre: [
    {
      _id: "5ad0ecf98c1cff1e849266f3",
      name: "Fantasy",
      url: "/catalog/genre/5ad0ecf98c1cff1e849266f3",
      id: "5ad0ecf98c1cff1e849266f3"
    }
  ],
  _id: "5ad0ecfc8c1cff1e849266f7",
  title: "The Wise Man's Fear (The Kingkiller Chronicle, #2)",
  summary:
    "Picking up the tale of Kvothe Kingkiller once again, we follow him into exile, into political intrigue, courtship, adventure, love and magic... and further along the path that has turned Kvothe, the mightiest magician of his age, a legend in his own time, into Kote, the unassuming pub landlord.",
  author: {
    _id: "5ad0ecf98c1cff1e849266ee",
    first_name: "Patrick",
    family_name: "Rothfuss",
    date_of_birth: "1973-06-06T00:00:00.000Z",
    name: "Rothfuss, Patrick",
    url: "/catalog/author/5ad0ecf98c1cff1e849266ee",
    id: "5ad0ecf98c1cff1e849266ee"
  },
  isbn: "9788401352836",
  url: "/catalog/book/5ad0ecfc8c1cff1e849266f7",
  id: "5ad0ecfc8c1cff1e849266f7"
};

收到错误:无法读取属性'标题'未定义,如果我将book的默认值设置为空对象,我可以获得标题, 但现在我得到错误:无法阅读财产' name'未定义的。

是什么

这里是默认状态

render() {
  const [book={}, ...rest] = this.state.details;
  console.log(JSON.stringify(book, null, 2));

// console.log(book.title);

 return (
   <div>
     <h2>{book.title}</h2>
     <p>{book.author.name}</p>
   </div>
 );
}

4 个答案:

答案 0 :(得分:1)

我从您的代码和错误中理解的是,状态中的details对象是异步获取的,因此组件在获得所需数据之前尝试呈现。

您可以在获取数据时返回null或加载消息。

render() {
    const [book={}, ...rest] = this.state.details;
    console.log(JSON.stringify(book, null, 2));

    // console.log(book.title);

    if (!book) return null;

    return (
      <div>
        <h2>{book.title}</h2>
        <p>{book.author.name}</p>
      </div>
    );
}

答案 1 :(得分:0)

你必须初始化你的对象(书):
示例

 book = {
      genre: [
        {
          _id: null,
          name: null,
          url: null,
          id: null
        }
      ],
      _id: null,
      title: null,
      summary: null,
      author: {
        _id: null,
        first_name: null,
        family_name: null,
        date_of_birth: null,
        name: null,
        url: null,
        id: null
      },
      isbn: null,
      url: null,
      id: null
    };

答案 2 :(得分:0)

我的猜测是在你的第一个渲染细节= []期间,然后你用有效的细节更新状态,导致组件重新渲染。

所以这是第一次渲染时的错误

试试这个

render() {
  const [book={}, ...rest] = this.state.details;
  console.log(JSON.stringify(book, null, 2));

  if (ramda.isEmpty(book)) return null
  // console.log(book.title);

  return (
    <div>
      <h2>{book.title}</h2>
      <p>{book.author.name}</p>
    </div>
  );

}

答案 3 :(得分:0)

读取你的评论,细节是一个数组,你做错了,它试图访问由于异步调用而未定义的值。

所以,当你这样做时:

const [book, ...rest] = this.state.details;

您正在获取当前[0]对象,但由于您没有预先加载任何内容,因此book.titlebook未定义而导致错误尝试{<1}}。

const [book={}, ...rest] = this.state.details;

基本上你是在没有任何东西的情况下创建一个默认对象(在第一个渲染中就是这种情况),这就是为什么你可以看到book.title(未定义,但是书不是)但是然后做{{1将它显示为错误,因为book.author.name已定义,但它没有一个名为author的道具,因此book无效。

author.name上完成异步调用后,它会更新触发另一个渲染的状态,然后您将获得数据。 在使用代码时,在加载数据时,请使用componentDidMount道具,因为渲染应该是这样的:

loading