时间戳

首页 > 解决方案 > 由于不同的神秘物体而反应错误

json - 由于不同的神秘物体而反应错误

问题描述

我正在尝试渲染一些 JSON，并且我得到的错误引用了我的 JSON 结构中不存在的一些字段。这些字段正在正确记录到控制台。

这是指哪个对象，我该如何解决？

错误：对象作为 React 子级无效（发现：对象与键 {_events、_eventsCount、_maxListeners、uri、回调、可读、可写、_qs、_auth、_oauth、_multipart、_redirect、_tunnel、headers、setHeader、hasHeader、getHeader , removeHeader, method, localAddress, pool, dests, __isRequestRequest, _callback, proxy, tunnel, setHost, originalCookieHeader, _disableCookies, _jar, port, host, path, httpModule, agentClass, agent})。如果您打算渲染一组子项，请改用数组。

帖子列表：

class PostList extends React.Component {
  render() {
    return (
      request('http://194.5.192.153:3044/api/posts/', function (error,response,body) {
        let items = JSON.parse(body).items;
        for(let i=0; i<items.length; i++) {
         console.log(items[i].author,items[i].desc,items[i].updatedAt,items[i].title);
          return (
            <Post author={items[i].author} desc={items[i].desc} image={items[i].image} title={items[i].title} createdAt={items[i].createdAt} updatedAt={items[i].updatedAt} />
          );
        }
      })
    )
  }
}

邮政：

const Post = (props) => {
    return (
      <>
        <img src={props.image} alt="" />
        <h1>{props.title}</h1>
        <h2>by {props.author}</h2>
        <div>Created at {props.createdAt}</div>
        <div>Updated at {props.updatedAt}</div>
        <div>{props.desc}</div>
      </>
    );
}

  export default Post;

标签： jsonreactjs

解决方案

在您的代码中，您实际上是在尝试从 呈现返回值request，这肯定不是您想要的。由于request是异步的，这里的一般模式是在回调中设置状态，然后在渲染方法中映射该状态。

class PostList extends React.Component {
  state = { items: [] };

  componentDidMount() {
    request(
      "http://194.5.192.153:3044/api/posts/",
      (error, response, body) => {
        const items = JSON.parse(body).items;
        this.setState({ items });
      }
    );
  }

  render() {
    return this.state.items.map((item) => (
      <Post
        key={item.title}
        author={item.author}
        desc={item.desc}
        image={item.image}
        title={item.title}
        createdAt={item.createdAt}
        updatedAt={item.updatedAt}
      />
    ));
  }
}

推荐阅读