在地图功能中传递道具不起作用。将其作为关键作品传递答案

【问题标题】：Passing props in map function doesn't work. Passing it as key works在地图功能中传递道具不起作用。将其作为关键作品传递
【发布时间】：2019-12-29 17:52:13
【问题描述】：

我将一个数组作为道具从 App.js 传递给组件 B。数组：

myOptions: [
{
    id: 1,
    option: "Option1"
},
{
    id: 2,
    option: "Option2"
},
{
    id: 3,
    option: "Option3"
}
]

从 App.js 我将它传递给组件 B：

<ComponentB 
    options={this.state.myOptions}
/>

组件B：

import React from 'react';

import ComponentC from './ComponentC';


function ComponentB (props) {

  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
}

    return (
        <div>
        <h3> ComponentB </h3>
        {props.options.map(renderOptions)}
      </div>
    );

}

export default ComponentB;

ComponentC只显示optionContent：

import React from 'react';

function ComponentC(props) {
  return (
    <div>
        {props.optionContent}
    </div>
  );
}

export default ComponentC;

虽然代码工作正常，但我不确定为什么在renderOptions 函数中，我需要使用key.option 来传递optionContent={key.option} 属性。当我使用props.option 时，它不起作用。

是不是因为renderOptions函数嵌套在ComponentB函数里面？

【问题讨论】：

在我看来像苹果和橘子。一方面，您正在查看props.options 的单个元素，另一方面，您正在查看props.options 的所有元素。 “它不起作用”到底是什么意思？
我认为 renderOptions 中的变量来自哪里有些混乱。 map 提供了密钥 arg。另外，props.option 的值是什么，因为它看起来未定义。
@ggorlen 我在控制台或屏幕上没有收到任何错误。
您可以使用props 代替key 参数，然后使用props.option。

标签： javascript arrays reactjs array-map

【解决方案1】：

首先，您应该了解map() 的工作原理。

在您的代码中，

function ComponentB (props) {
  function renderOptions(key) {
    return(
      <ComponentC
        key={key.option}
        optionContent={key.option} //this is my question
        answers={props.option}
      />
    );
  }
  return (
      <div>
      <h3> ComponentB </h3>
      {props.options.map(renderOptions)}
    </div>
  );
}

您像这样使用map() {props.options.map(renderOptions)}，看起来还可以。

但是您应该对map() 的论点有所了解。

你可以阅读它

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

通常，map() 有 3 个参数，可以使用其中的 2 个。 currentValue 和 index。

然后，再次返回您的代码。

你传递了你的函数 renderOptions() 本身。

这意味着renderOptions()可以从map()获取所有参数

你可以触摸currentValue、index等东西。

但是，renderOptions() 只有一个参数key。

（如果你想触及所有参数，你应该这样写function renderOptions(v, i, arr)）

因此，您只能将key 视为currentValue。

而currentValue 拥有Array 的每一项。

{
    id: 1,
    option: "Option1"
}

你必须像那样重写你的代码。

function renderOptions(v,i,arr) {
    return(
      <ComponentC
        key={v.id} // because the key should be unique.
        optionContent={v.option} 
        answers={arr} // Actually, I don't understand this purpose.
      />
    );
}

【讨论】：