Question

我正在清理所有警告标志，似乎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;

然后它继续发出此警告：

警告：标签上的道具logout的无效值

Answer 1

对于我来说，问题出在使用rest运算符从props接收参数之后，子组件中存在问题，我将其放在错误的组件上。因此它无法识别这些道具并向我发出警告。

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

1 个答案: