看起来像是反模式。

Question

我想在从服务器获取数据时渲染加载程序微调器。我已经实现了，但是我知道这不是最好的方法，因为使用了“ 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)

   });
  }

Answer 1

看起来像是反模式。

反应（视图）应由数据（状态/属性）驱动。通常，您不应该在事件处理程序中“渲染”（操纵真实的DOM）任何东西。处理程序/关闭操作应导致状态突变（var res = await axios(URL); this.setState({ recipesList: res.data.recipes, isLoading: true });），迫使其做出反应以重新呈现组件视图。最简单的计数器示例说明了这一点！

isLoading

<Loading/>应该在axios调用之前设置-以便进行{ isLoading ? <Loading /> : <RecipesList recipesList={recipesList} /> }渲染。

您可以使用三元运算符简单地渲染加载而不是列表：

{{1}}

阅读完整的文档，更完整的教程-不是最低要求的片段！真正值得知道什么是可能的以及如何做到的。

如何避免使用ref渲染加载器

1 个答案:

看起来像是反模式。