Question

考虑一下我有一个数据列表。

每行包含一个用户名列。

用户名列包含UserName反应组件。

UserName组件在其componentDidMount（）中执行ajax请求，以从HTTP GET获取实际用户名。

多行将包含相同的用户名。

我遇到的问题是，如何才能为每个唯一的用户名发送一个ajax请求？

目前发生的是每个UserName组件发送自己的ajax请求以从HTTP GET获取用户名。

请注意，我不使用redux，因此这不是解决方案。

感谢

Answer 1

您可以在父组件中调用AJAX函数，并确保数据列表的每个子组件都有一个键。

您的父组件应在其状态中具有usernames数组。在父级componentDidMount()函数中，填充usernames数组。它应该只是一个调用，假设您可以从后端获得多个用户名。

然后，在render()函数中，您可以使用map生成UserName个组件：

this.state.usernames.map((un, i) => {
  return <UserName key={i} {...un} />
})};

组件之间的唯一性需要key。

Answer 2

因此，您需要存储应用程序的数据，而不是存储在演示文稿中（VirtualDOM树中的最后一页）组件。

解决方案 - 使用<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" /> <link rel="stylesheet" href="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" /> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3"> <input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' /> <datalist id="languages"> <option value="PHP">PHP</option> <option value="JavaScript">JavaScript</option> <option value="Cobol">Cobol</option> <option value="C#">C#</option> <option value="C++">C++</option> <option value="Java">Java</option> <option value="Pascal">Pascal</option> <option value="FORTRAN">FORTRAN</option> <option value="Lisp">Lisp</option> <option value="Swift">Swift</option> <option value="ActionScript">ActionScript</option> </datalist> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <input type="text" id="checkin" /> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <input type="text" id="checkout" /> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <form action="" method="get"> <select name="select" id="select"> <option value="0">Choose</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> </form> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> <script src="https://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script>方法获取父组件内的所有数据，然后将初始数据传递给每个组件。

此外，您还可以为每个唯一组件执行ajax请求，例如按钮单击。这需要更改当前组件的状态，并触摸回调以更新父组件的全局状态。

在ReactJS中，我可以多次显示SAME组件吗？

2 个答案: