在React中更改路线更改状态

问题描述

我想在选中复选框时显示选择标签。 在"/register"路由（这是默认路由）中，默认情况下应取消选中复选框，而在"/register/TradeUser"中，默认情况下应选中此复选框。 如果我使用defaultChecked="true"，则checked的状态将不会更改为true。 所以我想知道，如何在条件渲染中调用setChecked(true)？

const Register = (match) => {
  const [checked,setChecked] = useState(false);

  const toggleChecked = () => {
    if (checked) {
      setChecked(false);
    } else {
      setChecked(true);
    }
  };

  return (
      <form>
        <input type="text" name="first-name" placeholder="First Name" />
        <input type="text" name="last-name" placeholder="Last Name" />
        <input type="email" name="email" placeholder="Email Address" />
        <input type="password" name="password" placeholder="Password" />
        <input type="password" name="confirm" placeholder="Confirm Password" />
        {match.location.pathname === "/register/TradeUser" ? (
          <div>
            <label>
              <input
                type="checkBox"
                name="profession"
                checked={checked}
                onChange={() => toggleChecked()}
              />
              I am an Architect/Interior designer
            </label>
            <select
              name="info"
              placeholder="Select Option to add Architect Info"
              className={`${checked ? "" : "hidden"}`}
            >
              <option value="certi-number">Certificate Number</option>
              <option value="certificate">Registration Certificate</option>
            </select>
          </div>
        ) : (
          <div>
            <label>
              <input
                type="checkBox"
                name="profession"
                checked={checked}
                onChange={() => toggleChecked()}
              />
              I am an Architect/Interior designer
            </label>
            <select
              name="info"
              placeholder="Select Option to add Architect Info"
              className={`${checked ? "" : "hidden"}`}
            >
              <option value="certi-number">Certificate Number</option>
              <option value="certificate">Registration Certificate</option>
            </select>
          </div>
        )}
        <button>Register</button>
      </form>
      <label>
        Existing User?
        <Link to="/login" className="link">
          {" Login "}
        </Link>
      </label>
    </div>
  );
};

解决方法

您可以像这样轻松地在jsx中运行函数

export default function App() {
  return (
    <div className="App">
      {console.log(1)}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

但是您不应该在jsx中设置状态，因为它会无限循环

在这种情况下，您可以使用useEffect

useEffect(()=>{
   if(match.location.pathname=== "/register/tradeUser"){
      setChecked(true)
   }else{
      setChecked(false)
   }
},[match.location.pathname])