getting Objects are not valid as a React child 错误

Question

我正在尝试向我的服务器发出获取请求并将响应 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>  
    );      
}
}

我通过谷歌搜索发现了类似的错误，但 none 帮助了..

非常感谢您的帮助

Answer 1

我认为你缺少括号；

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

Answer 2

这个问题是您正在尝试渲染 place，我认为它是 li.

中的一个对象

您需要选择要渲染的属性

例如：

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

getting Objects are not valid as a React child 错误

getting Objects are not valid as a React child error

setstate

reactjs

fetch-api