无法将地图中的项目参数传递给 onClick

Question

我试图将item传递给onClick处理程序，但结果表明item是一个对象，但它只是一个字符串。

这是我的代码：

const UploadMain = () => {
  return (
    <Fragment>
      <div className="part">
        <h2 className="part-h2">category: </h2>
        <Options
          items={["one", "two", "three", "four"]}
          name={useSelector(state => state.upload.category)}
        />
      </div>
    </Fragment>
  );
};

const Options = props => {
  let [status, setStatus] = useState(false);
  return (
    <div className="options-container">
      <div className="options-header" onClick={() => setStatus(!status)}>
        <p>{props.name}</p>
      </div>
      <ul className={status ? "options-ul shown-ul" : "options-ul hidden-ul"}>
        {props.items.map((item, index) => {
          return (
            <li
              key={index}
              value={item}
              onClick={item => {
                console.log(item) //this line logs some object
              }}
            >
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

记录的对象：

Answer 1

那不是一个item而是一个event对象。 该项目不引用项目中的项目，但它的行为类似于事件对象的别名。

改为改为此并按原样放置日志：

onClick={e => {

Answer 2

你可以试试这个代码。

 {props.items.map((item, index) => { return ( <li key={index} value={item} onClick={e => { console.log(item) //this line logs some object }} > {item} </li> ); })}

您需要做的就是将项目更改为 e（事件对象与项目不同）

Answer 3

像这样传递onClick={()=> handleClick(item)}并定义函数

const handleClick = item =>{
    console.log(item);
   }

改进的代码

const Options = props => {
  const handleClick = item =>{
    console.log(item);
   }
  let [status, setStatus] = useState(false);
  return (
    <div className="options-container">
      <div className="options-header" onClick={() => setStatus(!status)}>
        <p>{props.name}</p>
      </div>
      <ul className={status ? "options-ul shown-ul" : "options-ul hidden-ul"}>
        {props.items.map((item, index) => {
          return (
            <li
              key={index}
              value={item}
              onClick={()=> handleClick(item)}
            >
              {item}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

Answer 4

    {props.items.map((item, index) => {
      return (
        <li
          key={index}
          value={item}
          onClick={item => {
            console.log(item) //this line logs some object
          }}
        >
          {item}
        </li>
      );
    })}

如果仔细查看那里，您首先在上层范围内声明 item 变量（在map方法中声明），然后在onClick处理程序中在下层范围内声明另一个item变量。

要解决您的问题 - 不要在范围内两次使用相同的变量名称，这很容易出错。 linter 会捕捉到这一点，如果您还没有，请设置一个。

onClick 处理程序中的变量始终是事件。 如果要将 item 变量发送到 onClick 使用：

   <li
    onClick={(ev) => console.log(item)}
   >
    {item}   
   </li>

在这里，我不重新声明item ，因此它可以按您的需要工作。

不要担心现在这不是完美优化的事实 - 您可以使用useCallback钩子来防止在每次渲染时创建该函数，但在小示例中应该无关紧要。