*使用 react-router-dom 和 react.js

我有兩組不同的單選按鈕。一組有 2 個按鈕，而另一組有 3 個。每當用戶單擊兩個按鈕（每組一個按鈕）時，我都想導航到新頁面。我們總共有六種不同的結果，因此需要導航到 6 個不同的頁面。它似乎作業正常，但有一個問題：它僅在我們第二次單擊按鈕時才有效。示例：單擊“訊息”和“全域”最初不起作用并且不執行任何操作，但是如果我們單擊不同的按鈕，它會導航到我們單擊的初始按鈕集。

有誰知道如何解決這個問題？謝謝你。

import { useNavigate } from 'react-router-dom';

export default function DisplayHomeOptions() {
    let navigate = useNavigate();
    const [formData, setFormData] = React.useState({ location: "", selector: "" })

    function handleChange(event) {
        const { name, value, type, checked } = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }

    function test() {
        return (
            formData.location === "National" && formData.selector === "Polls" ? navigate("/np") :
                formData.location === "Global" && formData.selector === "Questions" ? navigate("/gq") :
                    formData.location === "Global" && formData.selector === "Polls" ? navigate("/gp") :
                        formData.location === "National" && formData.selector === "Messages" ? navigate("/nm") :
                            formData.location === "National" && formData.selector === "Questions" ? navigate("/nq") :
                                formData.location === "Global" && formData.selector === "Messages" ? navigate("/gm") : null
        )
    }


    return (
        <div>
            <fieldset>
                <legend>Option #1</legend>
                <input
                    type="radio"
                    name="location"
                    value="Global"
                    onChange={handleChange}
                    onClick={test}
                />

                <label htmlFor="Global">Global</label>
                <input
                    type="radio"
                    name="location"
                    value="National"
                    onChange={handleChange}
                    onClick={test}
                />
                <label htmlFor="National">National</label>
            </fieldset>

            <fieldset>
                <legend>Option #2</legend>
                <input
                    type="radio"
                    name="selector"
                    value="Messages"
                    onChange={handleChange}
                    onClick={test}


                />
                <label htmlFor="Messages">Messages</label>
                <input
                    type="radio"
                    name="selector"
                    value="Questions"
                    onChange={handleChange}
                    onClick={test}

                />
                <label htmlFor="Questions">Questions</label>
                <input
                    type="radio"
                    name="selector"
                    value="Polls"
                    onChange={handleChange}
                    onClick={test}
                />
                <label htmlFor="Polls">Polls</label>
            </fieldset>
        </div>
    )
}```

uj5u.com熱心網友回復：

問題

問題是 React 狀態更新不會立即處理，它們會被排隊并稍后異步處理。當函式被同時呼叫時，formData狀態更新handleChange還不可用。test

解決方案

您似乎希望導航行為成為從單選按鈕中選擇的效果。將test函式邏輯移動到useEffect鉤子中以發出命令式導航。

例子：

export default function DisplayHomeOptions() {
  const navigate = useNavigate();

  const [formData, setFormData] = React.useState({
    location: "",
    selector: ""
  });

  useEffect(() => {
    const { location, selector } = formData;
    switch (true) {
      case location === "National" && selector === "Polls":
        navigate("/np");
        break;

      case location === "Global" && selector === "Questions":
        navigate("/gq");
        break;

      case location === "Global" && selector === "Polls":
        navigate("/gp");
        break;

      case location === "National" && selector === "Messages":
        navigate("/nm");
        break;

      case location === "National" && selector === "Questions":
        navigate("/nq");
        break;

      case location === "Global" && selector === "Messages":
        navigate("/gm");
        break;

      default:
      // ignore
    }
  }, [formData]);

  function handleChange(event) {
    const { name, value, type, checked } = event.target;
    setFormData((prevFormData) => {
      return {
        ...prevFormData,
        [name]: type === "checkbox" ? checked : value
      };
    });
  }

  return (
    <div>
      <fieldset>
        <legend>Option #1</legend>
        <input
          type="radio"
          name="location"
          value="Global"
          onChange={handleChange}
        />

        <label htmlFor="Global">Global</label>
        <input
          type="radio"
          name="location"
          value="National"
          onChange={handleChange}
        />
        <label htmlFor="National">National</label>
      </fieldset>

      <fieldset>
        <legend>Option #2</legend>
        <input
          type="radio"
          name="selector"
          value="Messages"
          onChange={handleChange}
        />
        <label htmlFor="Messages">Messages</label>
        <input
          type="radio"
          name="selector"
          value="Questions"
          onChange={handleChange}
        />
        <label htmlFor="Questions">Questions</label>
        <input
          type="radio"
          name="selector"
          value="Polls"
          onChange={handleChange}
        />
        <label htmlFor="Polls">Polls</label>
      </fieldset>
    </div>
  );
}

一種優化可能是將來自location和selector值的目標路徑的 Map 宣告為鍵。

const navTarget = {
  National: {
    Messages: "/nm",
    Polls: "/np",
    Questions: "/nq",
  },
  Global: {
    Messages: "/gm",
    Polls: "/gp",
    Questions: "/gq",
  }
}

...

useEffect(() => {
  const { location, selector } = formData;
  if (location && selector) {
    const target = navTarget[location][selector];
    if (target) {
      navigate(target);
    }
  }
}, [formData]);

uj5u.com熱心網友回復：

onClick事件在onChange事件之前觸發。為了解決這個問題，您可以將導航移到onChange事件處理程式中。

標籤：javascript 反应 if 语句 单选按钮 反应路由器dom

上一篇：Jython-這兩個布爾陳述句做同樣的事情嗎？

下一篇：我不明白代碼是如何變成56、49