ReactJS中如何从对象数组取值并解决渲染报错问题

错误原因很明确：你在ListItem组件里直接把整个props对象渲染到<h2>标签里了，React不允许直接渲染对象类型的内容，因此抛出了这个错误。

看你的代码逻辑，给ListItem传递的是title属性，所以只需要在组件里取出props.title来渲染即可，修改后的ListItem.js代码如下：

const ListItem = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  );
};

export default ListItem;

如果想让代码更简洁，也可以用解构赋值直接获取title：

const ListItem = ({ title }) => {
  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
};

export default ListItem;

修改后就能正常渲染每个house的title内容了。

内容的提问来源于stack exchange，提问作者userName