切换选项无法正确使用 useState答案

【问题标题】：Toggling options not working with useState correctly切换选项无法正确使用 useState
【发布时间】：2019-06-07 17:49:40
【问题描述】：

我有以下组件：

import React, {
    Fragment,
    useState
} from "react";
import PropTypes from "prop-types";
import {
    connect
} from "react-redux";

import {
    Link,
    withRouter
} from "react-router-dom";

const ChooseRole = () => {
    //   const [role, setRole] = useState({
    //     business: false,
    //     jobSeeker: false
    //   });

    const [business, toggleBusiness] = useState(false);
    const [jobSeeker, toggleJobSeeker] = useState(false);

    const onClick = (e, roleType) => {
        switch (roleType) {
            case "business":
                toggleBusiness(!business);

                if (business === true) {
                    toggleJobSeeker({
                        jobSeeker: false
                    });
                }
                break;

            case "jobSeeker":
                toggleJobSeeker(!jobSeeker);

                if (jobSeeker === true) {
                    toggleBusiness({
                        business: false
                    });
                }
                break;
        }
    };
 return (
      <Fragment>
           <h1>First thing's first</h1>
           <h3 className="mt-4">I'm a...</h3>
           <h3
           name="business"
           className={business === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "business")}
           >
           Business
           </h3>
           <h3
           name="jobSeeker"
           className={jobSeeker === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "jobSeeker")}
           >
           Talent
           </h3>
      </Fragment>
 );

当我单击呈现的任一 h3 元素时，未正确添加 className。点击，比如说，业务——那个h3的文本应该变成橙色。再次单击它应将其变回黑色。如果文字业务为橙色，点击人才应将人才文字变为橙色，将业务文字变为黑色。但是由于某种原因，点击业务，然后点击人才，它们都变成了橙色。再次单击其中一个会使它们都变回黑色。我不确定我在这里做错了什么，我在某处有逻辑错误吗？

【问题讨论】：

反应 setstate 是异步的。看起来您没有使用更新的值...business === true 此检查位于您将其切换为 ! 本身的行之后。但它的价值没有改变
我用 await/async 试过了，还是不行 :(

标签： javascript reactjs

【解决方案1】：

您的问题是您在状态中设置对象而不是布尔值。您还需要引用正确的变量。而不是检查业务是否真实并将求职者变为虚假..只需在业务切换时检查求职者是否为真

switch (roleType) {
  case "business":
    toggleBusiness(!business);

    if (jobSeeker === true) {
      toggleJobSeeker(false);
    }
    break;

  case "jobSeeker":
    toggleJobSeeker(!jobSeeker);

    if (business === true) {
      toggleBusiness(false);
    }
    break;
}

See it in action!

【讨论】：