在 React 中更改路由更改的状态

Question

我想在选中复选框时显示 select 标记。在 "/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>
  );
};

Answer 1

你可以像这样在 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])

在 React 中更改路由更改的状态

Changing state on route change in React

state

jsx

reactjs

conditional-rendering

react-router-dom