javascript - 警告 : Invalid value for prop `value` on <input> tag

Question

我收到此警告，但我无法找出原因:“标签上的 prop value 值无效。要么将其从元素中删除，要么传递一个字符串或数字值以保留它在 DOM 中。”

const [inputValues, setInputValues] = useState({});

const sendPost = async () => {
    if (inputValues.link.length > 0) {
      setPostList([...postList, inputValues]);
      setInputValues('');
    } else {
      console.log('Empty inputs. Try again.');
    }
  };

  const onInputChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputValues(values => ({...values, [name]: value}))
  };

const renderConnectedContainer = () => (
    <div className="connected-container">
      <form
      onSubmit={(event) => {
        event.preventDefault();
        sendPost();
      }}
    >
      <input 
        type="text" 
        placeholder="Enter title!" 
        name="title" value={inputValues.title || ""} 
        onChange={onInputChange}/>
      <input 
        type="text" 
        placeholder="Enter link!" 
        name="link" 
        value={inputValues.link || ""} 
        onChange={onInputChange}/>
      <textarea 
        type="text-area" 
        placeholder="Enter description!" 
        name="description" 
        value={inputValues.description || ""} 
        onChange={onInputChange}/>
      <button type="submit" className="cta-button submit-post-button">Submit</button>
    </form>
   </div>
  );

Answer 1

在sendPost处理程序，您正在重置 inputValues状态为空字符串 ''而不是回到空对象的初始状态{} . inputValues.title没问题，因为它只是未定义，但是 inputValues.link (即 ''.link )实际上是一个已弃用的函数。

String.prototype.link

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed fromthe relevant web standards, may be in the process of being dropped, ormay only be kept for compatibility purposes. Avoid using it, andupdate existing code if possible; see the compatibility table at thebottom of this page to guide your decision. Be aware that this featuremay cease to work at any time.

link()方法创建一个表示代码的字符串 <a>用作指向另一个 URL 的超文本链接的 HTML 元素。

只需重置 inputValues回到初始状态。

const sendPost = async () => {
  if (inputValues.link.length > 0) {
    setPostList([...postList, inputValues]);
    setInputValues({});
  } else {
    console.log('Empty inputs. Try again.');
  }
};