错误问题:道具类型失败:道具“onClick”在“字母”中标记为必需，但其值为“未定义”

Question

我是 React 的新手，所以出于教育目的，我正在构建一个刽子手游戏。但是我遇到了一个问题，从下面的代码片段中，onclick事件无法识别为函数。我认为这个问题可能源于this的使用不当，但只是一个假设。

定义

const Letter = ({ index, letter, onClick }) => (
  <div className={`letter`} onClick={() => onClick(index)}>
    <button >
      {letter}
    </button>
  </div>
)

渲染部分

ALPHABET.map((letter, index) => (
    <Letter
      letter={letter}
      index={index}
      key={index}
      onClick={this.addLetter(letter,usedLetters)}
    />

Answer 1

问题就在这里：

onClick={this.addLetter(letter,usedLetters}

组件呈现后立即调用函数。

假设您正在定义一个类组件，并且addLetter是其中的箭头函数，如下所示：

addLetter = (letter, usedLetters) => {
  ...
}

您可以将 onClick 属性重新设计为此，它仍然需要您默认定义的参数。

onClick={this.addLetter}

此外，您从未将usedLetters作为属性传递给Letter

<Letter
  letter={letter}
  usedLetters={usedLetters}
  index={index}
  key={index}
  onClick={this.addLetter(letter,usedLetters)}
/>