如何正确使用带有 React 功能组件的键？这是我的喜欢按钮：

Posted 2023-02-22

【中文标题】如何正确使用带有 React 功能组件的键？这是我的喜欢按钮：

【英文标题】：How do I properly use keys with React functional components? Here's my like button:

【发布时间】：2020-11-19 14:04:33

【问题描述】：

我正在尝试使用 React 构建一个类似 Facebook 的按钮，以便更好地处理有状态组件。我不确定问题是什么，但我认为是关键。

Error: Objects are not valid as a React child (found: object with keys numLikes, onSelect). If you meant to render a collection of children, use an array instead.
    in p (at LikeButton.js:8)
    in LikeButton (at App.js:10)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

这里是 App.js：

import React,  useState  from 'react';
import './App.css';
import LikeButton from './components/LikeButton';

function App() 
  const [likes, updateLikes] = useState(23);
  const [liked, updateLiked] = useState(false);

  return (
    <LikeButton 
    secret='like-button'
    numLikes=likes
    // status=liked
    onSelect=(liked) => 
      if (liked) 
        updateLikes(likes + 1);
        else  updateLikes(likes - 1)
       ;
      updateLiked(!liked);
      
    
    />
    // onClick function here, or in LikeButton.js?
  );


export default App;

这是 LikeButton.js：

import React from 'react';
import FaThumbsUp from 'react-icons/fa';

export default function LikeButton(secret, numLikes, onSelect) 
    return (
      <>
        <div key=secret onClick=onSelect>Like Button</div>
        <p>numLikes</p>
      </>
    );

【问题讨论】：

从 LikeButton.js 中注释掉 <p>numLikes</p>，如果解决了，控制台记录 numLikes，因为它可能不是你认为的整数

【参考方案1】：

在功能组件中使用属性时，您需要销毁道具，而不是单独使用它们。因为组件的属性是函数中的第一个参数

import React from 'react';
import FaThumbsUp from 'react-icons/fa';

export default function LikeButton(secret, numLikes, onSelect) 
    return (
      <>
        <div key=secret onClick=() => onSelect(true)>Like Button</div>
        <div key=secret onClick=() => onSelect(false)>Dislike Button</div>
        <p>numLikes</p>
      </>
    );

当您收到此类错误时，请知道您正在尝试呈现不是 React 元素或非对象类型数据的属性或变量。

【讨论】：

很高兴它有帮助。干杯！

现在的问题是，likes 只会增加。似乎liked 没有在true 和false 之间交替。

我将修改我的答案以解决该问题。您没有不喜欢按钮，而且您的 onSelect 根本不发送数据。

我试图让点击按钮时减少它，并且状态变量liked 是true。反之亦然，这样按钮就像在 facebook 上一样工作。我认为updateLiked 函数会替换liked 的值，它应该，但由于某种原因，代码块没有触发。我的编辑说liked 已声明但从未使用过。我认为问题在于我的参数liked 并不是我的状态变量liked。

你根本不需要liked 标志。只需根据小麦 LikeButton 设置计数器即可。如果你的like按钮只增加，就增加。你根本不需要liked 状态

【参考方案2】：

secret、numLikes、onSelect 在 props 对象内。你应该在使用前销毁。

const secret, numLikes, onSelect = props