使用reactjs拆分数组值[重复]答案

【问题标题】：Split array value using reactjs [duplicate]使用reactjs拆分数组值[重复]
【发布时间】：2018-07-10 04:25:07
【问题描述】：

我有一个这样的数组：

["Daniel", "Adam", "Charlie", "Brad"]

我想将该数组放入 react 中。所以我期待这样的结果

<select>
    <option> Daniel </option>
    <option> Adam </option>
    <option> Charlie </option>
    <option> Brad </option>
</select>

我该如何解决？任何答案将不胜感激。

【问题讨论】：

欢迎来到 Stack Overflow！请使用tour 并通读help center，尤其是How do I ask a good question? 做你的研究，search 以获取有关 SO 的相关主题，然后试一试。如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您遇到的问题。人们会很乐意提供帮助。祝你好运！

标签： javascript reactjs

【解决方案1】：

你可以在数组上使用map

let a = ["Daniel", "Adam", "Charlie", "Brad"];

<select>
    {
        a.map((item , index) => <option key={index}> {item} </option>)
    }
</select>

【讨论】：

不要忘记为每个选项元素设置唯一键。否则 React 会给出警告。
@HimanshuArora9419 当然是的
非常感谢，这对像我这样的初学者很有帮助。 :)
不客气 :)

【解决方案2】：

这很简单。只需 map 覆盖您的 array

class App extends React.Component {

      constructor() {
        super();
        this.state = {
          arr: ["Daniel", "Adam", "Charlie", "Brad"]
        }
      }


      render() {
      let {arr} = this.state;
        return (
          <select>
          {arr.map((x, i) => <option key={i}>{x}</option>)}
          </select>
        )
      }

    }

    ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：