Javascript 设置ReactJS会导致额外的div，新组件？

这是代码my react组件：

class App extends React.Component {

    constructor() {
        super();
    }

    update(e) {
        axios.get('https://myjsonurl.com', {
            params: {
                phrase: e.target.value
            }
        }).then(function (response) {

            console.log(response.data);

        }).catch(function (err) {
            console.log(err);
        });
    }

    render() {
        return (
            <div>
                <input type="text" onChange={this.update} />
            </div>
        )
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
}
更新（e）{
axios.get（）https://myjsonurl.com', {
参数：{
短语：e.target.value
}
}).然后（功能（响应）{
console.log（response.data）；
}).catch（函数（err）{
控制台日志（err）；
});
}
render（）{
返回(
)
}
}

通过搜索，我在浏览器的控制台中得到了正确的结果。有人能给我一些提示吗？我怎样才能在列表中插入这些数据

---

是否需要创建一个新组件并告知如何响应以使用此组件？

创建一个

状态变量并将响应保存在该变量中。从
render
方法调用
函数
，该方法将根据该响应创建列表

在
构造函数中绑定
update
方法

像这样：

class App extends React.Component {

    constructor() {
        super();
        this.state = {
            data: []
        }
        this.update = this.update.bind(this);   //bind the method
    }

    update(e) {
        axios.get('https://myjsonurl.com', {
            params: {
                phrase: e.target.value
            }
        }).then((response) => {
            this.setState({data: response.data});   //set the response in state
        }).catch((err) => {
            console.log(err);
        });
    }

    createList(){
        if(!this.state.data.length) return null;

        return  <ul>
                    {this.state.data.map((el, index) => <li key={index}> {el.KeyName} </li>)}
                </ul>
    }

    render() {
        return (
            <div>
                <input type="text" onChange={this.update} />
                {this.createList()}
            </div>
        )
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
}
this.update=this.update.bind（this）；//绑定方法
}
更新（e）{
axios.get（）https://myjsonurl.com', {
参数：{
短语：e.target.value
}
})。然后（（响应）=>{
this.setState（{data:response.data}）；//将响应设置为状态
}).catch（（错误）=>{
控制台日志（err）；
});
}
createList（）{
如果（！this.state.data.length）返回null；
返回

{this.state.data.map（（el，index）=>
{el.KeyName}
）}

}
render（）{
返回(
{this.createList（）}
)
}
}

注意：将
el.KeyName
替换为要显示的实际键，并为键
key={index}
指定一些唯一的值，因为我使用了index，因为我不知道有关响应的详细信息。
能否显示您得到的响应，你想如何显示它？@MayankShukla我得到一个带有结果的数组，我想将它显示为ul->li列表，结果如下：
array[对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，162更多…]