React Router页面跳转保留输入值及输入框无法修改问题排查

是的，问题确实出在Input的状态设置逻辑上。

在AddressLookup组件中，你给SearchBar传递的value是state?.postcode ?? input：

<SearchBar
  type="Address Look-up"
  placeholderText="by Postcode"
  value={state?.postcode ?? input}
  handleOnInput={(e) => setInput(e.target.value)}
  handleFind={handleFind}
/>

当从表单页跳转过来时，state.postcode存在，所以value会一直绑定state.postcode的固定值。而你修改输入框时，仅更新了input状态，但因为state.postcode始终存在，value不会切换到input，导致输入框显示的还是原始的state.postcode，看起来无法修改。

步骤1：初始化input状态时带入state.postcode #

把state.postcode作为input状态的初始值，让输入框的value仅绑定input状态：

const [input, setInput] = useState(state?.postcode ?? "");

步骤2：修改SearchBar的value传递 #

直接将input作为value传给SearchBar，无需再判断state.postcode：

<SearchBar
  type="Address Look-up"
  placeholderText="by Postcode"
  value={input}
  handleOnInput={(e) => setInput(e.target.value)}
  handleFind={handleFind}
/>

步骤3：简化SearchBar组件 #

移除SearchBar里的条件渲染，直接统一传递value，空值时也能正常显示占位符：

const SearchBar = ({ value = "", handleOnInput, handleFind }) => {
  return (
    <div>
      <Field>
        <Input value={value} onInput={handleOnInput} />
      </Field>
      <div>
        <Button appearance="primary" onClick={handleFind}>
          Find
        </Button>
      </div>
    </div>
  );
};

const AddressLookup = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  // 初始化时带入state中的postcode
  const [input, setInput] = useState(state?.postcode ?? "");
  const [results, setResults] = useState([
    {
      postcode: "",
      street: "",
      town: "",
      country: 0,
    },
  ]);

  const handleOnClick = (postcode, street, town, country) => {
    navigate("form", {
      state: {
        postcode: postcode,
        street: street,
        town: town,
        country: country,
      },
    });
  };

  const handleFind = () => {
    //api call here
    //setResults(...);
  };

  return (
    <div>
      <SearchBar
        type="Address Look-up"
        placeholderText="by Postcode"
        value={input}
        handleOnInput={(e) => setInput(e.target.value)}
        handleFind={handleFind}
      />
      {results.map((result, index) => {
        return (
          <div
            onClick={() =>
              handleOnClick(
                result.postcode,
                result.street,
                result.town,
                result.country.id
              )
            }
            key={index}
          >
            <div>{result.postcode}</div>
            <div>{result.street}</div>
            <div>{result.town}</div>
            <div>{result.country.name}</div>
          </div>
        );
      })}
    </div>
  );
};

const SearchBar = ({ value = "", handleOnInput, handleFind }) => {
  return (
    <div>
      <Field>
        <Input value={value} onInput={handleOnInput} />
      </Field>
      <div>
        <Button appearance="primary" onClick={handleFind}>
          Find
        </Button>
      </div>
    </div>
  );
};

另外补充一个表单组件的小问题：Town字段的Input value写错了，state?.field应该改为state?.town：

<Input
  value={state?.town ?? form.town}
  onChange={(e) => setForm({ ...form, town: e.target.value })}
/>

内容的提问来源于stack exchange，提问作者tomtomdam