我想在从服务器获取数据时渲染加载程序微调器。我已经实现了,但是我知道这不是最好的方法,因为使用了“ ref”。在这种情况下,如何避免使用“ ref”。我也想在其他组件中渲染微调器。在搜索组件中,我输入了带有“提交”按钮的输入,以将inputValue传递给App.js中的getQuery funn
sendMessage = (event) => {
event.preventDefault();
socket.emit(this.state.chatName, this.state);
socket.on('girls', (msg) => {
console.log(msg.message.message)
});
}
答案 0 :(得分:0)
反应(视图)应由数据(状态/属性)驱动。通常,您不应该在事件处理程序中“渲染”(操纵真实的DOM)任何东西。处理程序/关闭操作应导致状态突变(var res = await axios(URL);
this.setState({
recipesList: res.data.recipes,
isLoading: true
});
),迫使其做出反应以重新呈现组件视图。最简单的计数器示例说明了这一点!
isLoading
<Loading/>
应该在axios调用之前设置-以便进行{ isLoading ?
<Loading />
: <RecipesList recipesList={recipesList} />
}
渲染。
您可以使用三元运算符简单地渲染加载而不是列表:
{{1}}
阅读完整的文档,更完整的教程-不是最低要求的片段!真正值得知道什么是可能的以及如何做到的。