props ind 中 i 参数的值不变答案

【问题标题】：Value of i parameter in props ind is not changingprops ind 中 i 参数的值不变
【发布时间】：2017-07-27 21:57:47
【问题描述】：

代码片段：

function Button(props) {
  var ans = [
    ["56","30","11","20"],["1","-2","2","-1"],
    ["odd","even","none","both"]
  ];
  var button = [], i;
  for(i = 0; i <= 3; i++) {
    button.push(<button key={i} onClick={()=>props.ind(i)}>
                  {ans[props.q-1][i]}
                </button>)
  }
  return (<div>{button}</div>)
}

我是使用fatarrows和react的新手。我正在制作一个测验界面。这里的四个按钮（i = 0到3）中的每一个都可以选择一个特定的问题号。（q）关于检查网络开发者我发现对于 4 个按钮中的每一个，在 props.ind 方法中传入的 i 的值都是 4，即最终递增后的 i 的值。

【问题讨论】：

由于变量的函数作用域，每个 JavaScript 程序员都至少犯过一次常见错误。阅读以下内容：stackoverflow.com/questions/750486/…
感谢@Phil Bellamy 的帮助

标签： reactjs babeljs jsx

【解决方案1】：

终于修好了。所以 i 是一个 var 变量。对于存储在按钮数组中的四个按钮中的每一个，i 的值没有复制到 prop.ind(i) 方法参数中，而是存储了引用。因此，循环结束时 i 的最后一个值，即 4 是我们得到的对于每个 HTML 按钮，props.ind(4)。

现在，当我在 for 循环中声明 let i 时，引用不能被存储，因为它不能在循环外访问，结果 i 的立即值存储在 props.ind.ie props.ind(0) for 1st button , props.ind(1) for 2nd button 以这种方式。

【讨论】：

【解决方案2】：

很难理解您想要实现的目标。如果您添加更多信息，我可以提供更多帮助。

下面是一些可以帮助您入门的代码。它遍历问题数组，然后遍历答案：

const Buttons = (props) => {
  const questions = [
    ["56","30","11","20"],
    ["1","-2","2","-1"],
    ["odd","even","none","both"]
  ];

  return (
    <div>
      {questions.map((question, i) => (
        <div key={i}>
          {question.map((answer, n) => (
            <button key={n} onClick={() => alert(answer)}>
              {answer}
            </button>
          ))}
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(
  <Buttons />,
  document.getElementById('app')
);

<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="app"></div>

【讨论】：