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

debugcn 发表于 Dev

终身学习者

我正在尝试使用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>
      </>
    );
}

马里奥·彼得罗维奇

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

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元素或非对象类型数据的属性或变量。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。