警告： <i> 标签上的 prop `logout` 值无效答案

【问题标题】：Warning: Invalid value for prop `logout` on <i> tag警告： <i> 标签上的 prop `logout` 值无效
【发布时间】：2019-08-08 20:32:36
【问题描述】：

我正在清理所有警告标志，似乎 antd 或 react 没有任何关于如何修复此警告标志的文档。如果我从 Header.js 中取出 antd 导入，警告标志就消失了。

我尝试过的事情：解构道具和下面的链接：

https://github.com/ant-design/ant-design/issues/5226

Invalid value for prop `value` on <input> tag

我的代码如下所示：

App.js

import Header from "./components/header/header";

const App = () => {
   const [isAuth, updateLoginStatus] = useState(!!localStorage.getItem('user'));

   const logout = () => {
    updateLoginStatus(false);
  };

return (
    <Router>
      <div>
          <Route render={props => { const { staticContext, ...rest} = props; return (<Header {...rest} logout={logout} />)}}/>
      </div>
    </Router>
 );
};

export default App;

Header.js

import { Icon } from "antd";


const Header = props => {
   const { logout, history } = props

   const selectMenu = useCallback((option) => {

    switch (option) {
      case "logout":
        updateHeader({
          dashboard: false,
          details: false,
          alerts: false,
          logout: true
        });
        auhOut();
        logout();
        // isAuth = false;      
        break;
      default:
        break;
    }
  },[logout,history]);

export default Header;

然后它继续给出这个警告：

警告： 标签上的 prop logout 的值无效

【问题讨论】：

错误似乎来自您未显示的代码，很可能是一些 JSX 元素...
这个值logout: true 是否由一个基本上是i 元素的组件控制？
和antd无关，你这里没有组件
@SultanH。它由 styled-components div 元素中的 onClick 控制。
@DennisVash 每次我删除导入的 antd 图标时，警告都会消失...

标签： javascript reactjs antd

【解决方案1】：

对我来说，问题是在使用 rest 运算符从 props 接收参数后在子组件中，我把它放在了错误的组件上。所以它无法识别这些道具并向我发出警告。

【讨论】：