reactjs - React 数组作为 prop 传递给 SFC 时转换为对象

Question

我有一个 react 函数，我正在传递一个对象数组作为 Prop 。当组件渲染时，该数组被嵌套到同名的对象中。

为什么要嵌套？我可以做些什么来将其强制返回数组吗？

这是代码(以及笔的链接( https://codepen.io/bluesixty/pen/PJQKVq?editors=0010 ):

const tags = [
      {
        name: 'ios',
        link: '',
      },
      {
        name: 'ANDROID',
        link: '',
      },
      {
        name: 'REACT',
        link: '',
      },
      {
        name: 'javascript',
        link: '',
      },
    ]


const App = tagList => {

    return (
      <div>
        This is a React component!
        <ul>
          {tagList.tagList.map((tag, i) => (
            <li>
              {tag.name}
            </li>
        ))}
        </ul>
      </div>
    );
  }


ReactDOM.render(
    <App tagList={tags}/>,
  document.getElementById('root')
);

删除 .map 中的第二个 tagList 失败，并显示“tagList.map 不是函数”。这是真的，它现在是一个对象了？？？

{tagList.map((tag, i) => (

Answer 1

功能组件接收 props 作为第一个参数，因此正确的代码是:

const App = props => {

    return (
      <div>
        This is a React component!
        <ul>
          {props.tagList.map((tag, i) => (
            <li>
              {tag.name}
            </li>
        ))}
        </ul>
      </div>
    );
  }

也可以这样写:

const App = ({ tagList }) => (
  <div>
    This is a React component!
    <ul>
      {tagList.map(({ name }, i) => (
        <li>
          {name}
        </li>
      ))}
    </ul>
  </div>
);