函数不返回单选按钮列表 Reactjs-React Bootstrap

【问题标题】：fuction not returning a list of radio button Reactjs- ReactBootstrap函数不返回单选按钮列表 Reactjs-React Bootstrap
【发布时间】：2018-07-24 06:39:40
【问题描述】：

我正在开发一个仪表板，它从视力表中获取数据。我正在制作一个表格并使用一个函数来获取单选按钮列表：以下数组有它，只是为了澄清。从 API 获取值需要时间，所以我在函数中使用了 setTimeout：

setTimeout(() => {
    return timeForID.map( obj => {
      return (<Radio value={obj.date}>{obj.hours}:{obj.mins}</Radio>);
    })
  }, 500)

我在单选按钮的位置得到一个空格。

【问题讨论】：

标签： arrays reactjs settimeout react-bootstrap

【解决方案1】：

在 JavaScript 中有很多关于使用事件循环和回调的答案——请参阅：How do I return the response from an asynchronous call?

基本上，return 内的 setTimeout 不会去任何地方。

为了在您的组件中触发另一个渲染，您必须使用setState。您可以在 API 调用完成后调用setState——您不必使用setTimeout。假设您正在使用 fetch 获取 API：

fetch(apiUrl).then(response => response.json()).then(dates => setState({ dates }))

现在在你的渲染函数中你可以拥有：

{this.state.dates.map(({ date, hours, mins }) => (
  <Radio value={date}>{hours}:{mins}</Radio>
)}

将state 的dates 属性初始化为空数组，以防止初始加载时出错。

【讨论】：