当一切正常时，会出现错误提示：`style` 属性需要从样式属性到值的映射（Reactjs）答案

【问题标题】：When everything works fine, error occurs that says: The `style` prop expects a mapping from style properties to values (Reactjs)当一切正常时，会出现错误提示：`style` 属性需要从样式属性到值的映射（Reactjs）
【发布时间】：2021-11-27 18:22:27
【问题描述】：

function WelcomePage() {
 
***
  const history = useHistory();

  useEffect(() => {
    if(localStorage.getItem('currentUser')){
      history.push("/mainPage")
    }
  }, [])

  function loginHandler(){
      const ownerService = new OwnerService()
      const vetService = new VetService()

      if(selectedUserType==0){
          ownerService.getByUsername(username).then(response=>{
            const owner = response.data.data
            if(owner !=null ){
              if(owner.password==password){
                console.log(owner)
                dispatch(setCurrentUser(owner))
                toast("başarıyla giriş yaptın")
                localStorage.setItem('currentUser', JSON.stringify(owner))
                history.push("/mainpage")                //error says that there is a problem here
              }
              else{
                toast("böyle bir kullanıcı bulunamadı")
              }
            }else{
              toast("böyle bir kullanıcı bulunamadı")
            }
          })
      }
      
      if(selectedUserType==1){
        vetService.getByUsername(username).then(response=>{
          const vet = response.data.data
          if(vet !=null ){
            if(vet.password==password){
              dispatch(setCurrentUser(vet))
              toast("başarıyla giriş yaptın")
              localStorage.setItem('currentUser', JSON.stringify(vet))
              history.push("/mainpage")
            }
            else{
              toast("böyle bir kullanıcı bulunamadı")
            }
          }else{
            toast("böyle bir kullanıcı bulunamadı")
          }
        })
      }
  }

  return (
    <div>
      ***


    </div>
  );
}

export default WelcomePage;

错误信息：

Unhandled Rejection (Error): The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.


(anonymous function)
C:/Users/MithatAkbulut/Documents/GitHub/modules/Router.js:34
  31 | if (!props.staticContext) {
  32 |   this.unlisten = props.history.listen(location => {
  33 |     if (this._isMounted) {
> 34 |       this.setState({ location });
     | ^  35 |     } else {
  36 |       this._pendingLocation = location;
  37 |     }
View compiled
▶ 7 stack frames were collapsed.
(anonymous function)
C:/Users/MithatAkbulut/Documents/GitHub/vetwebapp-react/src/pages/WelcomePage.jsx:56
  53 |   dispatch(setCurrentUser(owner))
  54 |   toast("başarıyla giriş yaptın")
  55 |   localStorage.setItem('currentUser', JSON.stringify(owner))
> 56 |   history.push("/mainpage")
     | ^  57 | }
  58 | else{
  59 |   toast("böyle bir kullanıcı bulunamadı")
View compiled

似乎问题出在 useHistory 钩子上，但应用程序以前可以正常工作。我对 localStorage 有一些问题，并试图删除有关 localStorage 的所有内容以进行检索，但没有成功。错误消息说问题出在样式上，但我知道样式很好。

编辑： 问题在于将 'style={{}}' 与 '&&' 一起使用，而不是与 '||' 一起使用。虽然“真正”的应用程序有效，但其他案例应用程序不知道它会做什么并抛出错误。

不要这样使用：

<button style={true&&{background:"red"}} >Button example</button>

这种使用比上面的更没有问题：

<button style={true?{background:"red"}:{background:"green"}} >Button example</button>

【问题讨论】：

stackoverflow.com/questions/43366026/… 它说style 单数。应该是styles吗？可能不在欢迎页面上，但无论页面是 /mainpage

标签： reactjs local-storage

【解决方案1】：

除非我误解了错误，否则这是在讨论 HTML 元素上的 style 属性：

const MyComponent = ()=>{

    return (
        <div
            style={{fontSize: '25px'}} // <--this is what is required
            style={'font-size: 25px'}  // <--but something like this is what is causing the error
        >
            Hello, World!
        </div>
    );

};

查看所有组件及其值，确保它们都是包含 CSS 键/值对的对象。

错误的行号并不总是可信的，所以请四处看看。

【讨论】：