将 API JSON 结果作为选项列表传播答案

【问题标题】：Propagating API JSON results as option list将 API JSON 结果作为选项列表传播
【发布时间】：2017-10-22 02:36:32
【问题描述】：

我正在构建一个简单的新闻应用程序。我正在从 newsapi.org 获取我的 API，并试图在我的选择组件的列表中显示新闻来源选项。

但是，它目前将每个新闻来源显示为一个新的单独选项，而不是在一个选项组件中全部列出。（对不起，如果这很难理解，英语不是我的第一语言。因此，我在代码中包含了屏幕截图）。

提前谢谢大家。

componentDidMount() {
    fetch('http://beta.newsapi.org/v2/sources?apiKey=XXX')
    .then(results => {
        return results.json();
    }).then(data => {
        let sources = data.sources.map((src) => {
            return(
                <div key={src.sources}>
                   <select className="form-control form-inline">
                       <option value={src.id}>{src.name}</option>
                   </select>
                </div>
            )
        })
        this.setState({sources: sources});
    })
}

render() {
    return(
        <div className="container">
            <h2>Select a news source:</h2>
            {this.state.sources}
        </div>
    )
}
}

【问题讨论】：

您的映射应该返回单个 options，嵌套在父 select 下。您当前映射它的方式返回单个 option 元素及其自己的 select 元素。
@char 抱歉，我不太明白。对javascript来说很新。如果你不介意的话，你能稍微扩展一下吗？
对于data.sources 中的每个元素，您将返回。最终结果是多个选择/选项元素。你想要的是 .
@char 完美解释！我通过在我的渲染方法中修复它来修复它。再次感谢您！

标签： javascript json reactjs api

【解决方案1】：

我看到@char 已经为你解决了这个问题。不过，这里是代码。此外，最好只在状态中存储“数据”，然后使用状态在“渲染”函数中渲染视图。

class MyComponent extends React.Component {

  //other code

  componentDidMount() {
      fetch('http://beta.newsapi.org/v2/sources?apiKey=XXX')
      .then(results => {
          return results.json();
      }).then(data => {
          this.setState({sources: data.sources});
      })
  }

  render() {
    return(
      <div className="container">
        <h2>Select a news source:</h2>
        <SelectComponent sources={this.state.sources} />
      </div>
    )
  }
}

const SelectComponent = ({sources})=>(
  <select className="form-control form-inline">
    {sources.map((source)=>
      <option value={source.id} key={source.id} > {source.name} </option>
    )}
  </select>
);

【讨论】：