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

问题描述：

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

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

感谢所有提前。

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> 
    ) 
} 
}

你的映射应该返回单个'选项'，嵌套在父'select'下。你正在映射它的方式会返回单独的'option'元素和它自己的'select'元素。 – char

@char抱歉，我不完全明白。相当新的JavaScript。如果你不介意，你可以扩大一点吗？ –

对于'data.sources'中的每个元素，您将返回。最终结果是多个选择/选项元素。你想要的是。 – char

答

我看到@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> 
);

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

相关推荐