Question

我正在构建一个简单的新闻应用程序。我从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>
    )
}
}

Answer 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>
);

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

1 个答案: