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

【问题标题】：Changing state on route change in React在 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>
  );
};

【问题讨论】：

标签： reactjs state jsx react-router-dom conditional-rendering

【解决方案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])

【讨论】：