React点击组件按钮显示emoji时返回undefined问题排查

问题原因 #

点击后弹出undefined的核心问题有两点：

1. 事件处理函数里的el.target.value.emoji逻辑错误：el.target是你点击的<button>元素，这个按钮既没设置value属性，更不存在value.emoji这个层级的属性，自然返回undefined。
2. App中定义的logger函数无法获取对应Card的emoji数据——它只能接收到事件对象，没法直接拿到每个Card的props值。

解决方案 #

下面提供两种简单可行的修改方式：

方式一：在Card组件中传递emoji给logger

修改Card组件的按钮点击事件，直接把当前Card的emoji作为参数传给logger：

const Card = ({ _name, emoji, logger }) => {
  return (
    <div style={styles.wrapper}>
      {/* 调用logger时传入emoji */}
      <button onClick={() => logger(emoji)}>-</button>
      <h4>
        {_name} {emoji}
      </h4>
    </div>
  );
};

然后修改App里的logger函数，直接接收emoji参数：

const logger = (emoji) => {
  alert(emoji);
};

方式二：在App传递logger时绑定对应item的emoji

在App的map循环中，直接给每个Card的logger绑定当前item的emoji：

const App = () => {
  const logger = (emoji) => {
    alert(emoji);
  };

  return (
    <div style={styles.wrapper}>
      {arr.map((item) => {
        return (
          <Card
            _name={item._name}
            emoji={item.emoji}
            key={item.id}
            {/* 绑定当前item的emoji */}
            logger={() => logger(item.emoji)}
          />
        );
      })}
    </div>
  );
};

这种方式下Card组件不需要修改，保持原有写法即可。

如果需要同时显示名称和emoji，只需把参数换成组合后的内容，比如：

// 方式一的Card里修改为
<button onClick={() => logger(`${_name} ${emoji}`)}>-</button>
// App里的logger对应调整
const logger = (content) => {
  alert(content);
};

内容的提问来源于stack exchange，提问作者Asker