在数组对象上反应映射答案

【问题标题】：React map over the array object在数组对象上反应映射
【发布时间】：2020-07-29 09:10:21
【问题描述】：

我对 react 的东西很陌生，我正在尝试使用 .map() 生成一些动态的东西

这是我的组件：

import React, { Component } from "react";

class DynamicStuff extends Component {
  state = {
    options: [
      { id: 1, optionOne: "OptionOne" },
      { id: 2, optionTwo: "OptionTwo" },
      { id: 3, optionThree: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];
    
    return (
      <>
      {options.map((option) => {
        return {option}
      })}
        <span>{options.optionOne}</span>
        <span>{options.optionTwo}</span>
        <span>{options.optionThree}</span>
      </>
    );
  }
}

export default DynamicStuff;

我在这里做错了什么以及为什么地图没有产生预期的结果？

【问题讨论】：

通常数组中的对象具有相同的键，但这里它们是 optionOne，optionTwo，optionThree。你确定对象是正确的吗？

标签： javascript arrays reactjs ecmascript-6 components

【解决方案1】：

还好吗？

import React, { Component } from "react";
class DynamicStuff extends Component {
  state = {
    options: [
      { id: 1, value: "OptionOne" },
      { id: 2, value: "OptionTwo" },
      { id: 3, value: "OptionThree" }
    ]
  };
  render() {
    const options = [...this.state.options];

    return (
      <>
      {options.map((option) => {
        return <span>{option.value}</span>
      })}
      </>
    );
  }
}
export default DynamicStuff;

【讨论】：

你的span应该被包裹在map方法中，每次循环时，每个带有{option.value}的span都会显示
由于只有一个参数和单行返回，可以进一步精简箭头函数为options.map(option => (<span>{option.value}</span>))

【解决方案2】：

您错误地设置了选项对象。我们需要对数组中的所有对象具有相同的属性。

class App extends React.Component {
  state = {
   options: [
  { id: 1, option: "OptionOne" },
  { id: 2, option: "OptionTwo" },
  { id: 3, option: "OptionThree" }
 ]
  };
  render() {
   const options = [...this.state.options];

  return (
    <>
      {options.map((option, index) => (
        <li key={index}>{option.option}</li>
       ))}
      </>
    );
 }
}

另一件事，如果你需要映射一个数组。你不需要有很多跨度。有一个就够了。 map 函数将迭代并为您提供所有内容。

【讨论】：

【解决方案3】：

这里使用的map其实是把js对象转换成react元素，但是你这里使用的还是map转换后的js对象。反应元素可能是<p key = {option.id}> {option. optionOne} </p>。如果你的map中return后有react元素，就是正确的。

{options.map((option) => {
  return <p key = {option.id}> {option. optionOne} </p>
})}

或

{options.map((option) =>  <p key = {option.id}> {option. optionOne} </p>)}

【讨论】：

【解决方案4】：

你需要映射并返回 HTML 元素

return ({
  options.map((option) => {
    return `<span key={option.id}>${option. option}</span>`
  })
});

【讨论】：

【解决方案5】：

你应该做类似的事情

render() {
    const { options } = this.state;

    return (
        <div className="option-wrapper">
            {options.length > 0 && options.map(option => {
                return <span key={option.id}>{option.option}</span>
            })}
        </div>
    );
}

【讨论】：