Reactjs 获取对象作为子错误无效

我试图向我的服务器发出一个获取请求，并将响应json设置为组件的状态。 我得到这个错误

Objects are not valid as a React child (found: object with keys {description, 
    id, matched_substrings, place_id, reference, structured_formatting, terms, types}). If you meant to render a collection of children, use an array instead.
    in li (at Search.js:25)
    in ul (at Search.js:30)
    in div (at Search.js:28)
    in Search (at index.js:8)

这是我的密码-

import React from 'react'
import { ReactDOM } from "react-dom";

export default class Search extends React.Component {
constructor(props) {
    super(props);
    this.state = { 
        places: []
     }
     this.handleUserInput = this.handleUserInput.bind(this)
}
handleUserInput(e) {
    var searchInput = e.target.value;
    var url = '/searchLocation/autocomplete?text=' + (searchInput)

    if (searchInput.length > 2) {
        fetch(url).then(function(response) {return response.json()})
        .then((responseJson) => this.setState({places: responseJson["predictions"]}));    
        //.then( responseJson => console.log(responseJson["predictions"]))
    }
}
render() {
    const placeList = this.state.places.map(place => 
        {
            return <li>{place}</li>
        });
    return (
        <div>
            <input onChange={this.handleUserInput} type="text" id="PlaceSearch" />
            <ul>
                { placeList }
            </ul>    
        </div>  
    );      
}
}

从“React”导入React
从“react dom”导入{ReactDOM}；
导出默认类搜索扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
地点：[]
}
this.handleUserInput=this.handleUserInput.bind（this）
}
手动输入（e）{
var searchInput=e.target.value；
var url='/searchLocation/autocomplete？text='+（searchInput）
如果（searchInput.length>2）{
fetch（url）.then（函数（响应）{return response.json（）}）
.then（（responseJson）=>this.setState（{places:responseJson[“predictions”]}））；
//.then（responseJson=>console.log（responseJson[“预测]））
}
}
render（）{
const placeList=this.state.places.map（place=>
{
返回
{place}
});
返回(

{placeList}

);      
}
}

我通过谷歌搜索发现了类似的错误，但没有任何帮助

---

非常感谢您的帮助

我认为您缺少括号

 const placeList = this.state.places.map(place => 
    {
        return ( <li>{place}</li> )
    });

const placeList=this.state.places.map（place=>
{
返回（
{place}
）
});

这个问题是您正在尝试渲染

位置

，我假设它是

li

中的一个对象

您需要选择要渲染的属性

例：

return
{place.id}

这不是问题所在。。错误出现在我设置状态的第18行。顺便说一句，在您的示例中，每次调用render时都要重新创建

placeList

函数，这对性能不是很好。您应该将其作为类的一个方法

return <li>{place.id}</li>