Reactjs 错误，对象作为反应子无效？

Question

我在前端使用 reactjs，后端使用 nodejs。我通过这段代码调用我的后端（localhost:3001/api/tunes）：

componentDidMount(){
    fetch("/api/itunes")
    .then((results)=>{
        this.setState({queryResult:results});
    })
}

此代码应该返回一个字符串值，我将其分配给本地状态变量 queryResult。我不明白为什么代码给出错误 - 对象不是有效的反应子。

我的渲染函数：

render(){
            return(
                <div>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" 
                        value={this.state.queryValue} onChange={this.handleQueryChange} />
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit"
                        onClick={this.submitQuery}></button>
                    </form>

                    <div>{this.state.queryResult}</div>
                </div>

        );
}

这是我从我的服务器得到的：

router.get('/api/itunes',(req,res,next)=>{
    request('https://itunes.apple.com/search?term=jack+johnson', 
function (error, response, body) {
    if (!error && response.statusCode == 200) {
        // console.log(body) // Print the google web page.
        var result =JSON.parse(body);
        res.send(result.results[0].artistName);
        }
    });
});

Answer 1

您正在尝试渲染 this.state.queryResult 的整个对象。

React 无法渲染对象。您必须将其转换为字符串或必须从对象中提取每个值。

您可以使用{console.log(this.state.queryResult)} 轻松检查这一点