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

Posted 2023-02-22

【中文标题】在 React 中更改路由更改的状态

【英文标题】：Changing state on route change in React

【发布时间】：2020-12-08 10:05:14

【问题描述】：

我想在选中复选框时显示一个选择标签。 在"/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>
  );
;

【参考方案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])