更改 React 中受控組件的輸入初始值

Question

我有這個輸入組件

const FOO = props => {

  const [inputValue, setInputValue] = useState(
      props.editState ? props.initialValue : ""
  );

  const setSearchQuery = (value) => {
      setInputValue(value);
      props.onSearch(value);
  };

return (
  <input
    placeholder="Select ..."
    onChange={(e) => {
      setSearchQuery(e.target.value);
    }}
    value={inputValue}
  />
)}

我正在這樣使用它

const BAR = props => {
    const [fetchedData, setfetchedData] = useState({
        value : "" // to get rid of can't change controlled component from undefined error
    });
    const params = useParams();

    //request here to get fetchedData

return(
  <FOO
    onSearch={(value) => {
      searchSomethingHandler(value);
    }}
    initialValue={
      params.ID
      ? fetchedData.value
      : ""
    }
    editState={params.ID ? true : false}
  />
)}

我需要將獲取的數據的初始值設置到輸入中，以便用戶可以看到舊值並對其進行編輯，如果我將數據（fetchedData）作為道具傳遞它可以完美地工作，但如果我通過 API 獲取數據它不會設置值，因為它在第一次渲染時為空，請問我該如何解決？

Answer 1

您可能希望在值更新時使用useEffect掛鈎來運行代碼。

在FOO中：

const FOO = props => {
  // ...

  useEffect(() => {
    // This hook runs when props.initialValue changes
    setInputValue(props.initialValue);
  }, [props.initialValue]);

  // ...
};

我想你可以讓BAR和以前一樣。 不過，我會將請求放在帶有空依賴數組的useEffect掛鈎中的 API 中，這樣您就不會在每次渲染時都查詢它。