反应异步状态管理

Question

I hate to upload a code snippet with no sandbox, but this particular instance I use firebase so wasn't sure how to make one. Apologies for the verbose code. I'm a beginner React developer and I've been stuck on this state management issue for 2 weeks now, and I tried so many different methods but to no fruit. Please help.

My goal is to click AddLinkButton to make multiple input forms one by one, each input form would be different links, and by clicking Apply Button it would collect all the link values and store it to firebase's firestore. Once the storing is complete, it would display a preview by passing in multiple updated hook values to <UserPreview /> .

If I run this particular code below, the key which is supposed to be the value of the link input forms, is null and does not update on onChange.

Please help... much appreciated. Thank you.

EDIT: changed variable name key to keyHook but to no success. Same issue

const AdminCustomizer = () => {
  const [username, setUsername] = useState(null);
  const [linkForm, setlinkForm] = useState([]);
  const [spotlightLabel, setSpotlightLabel] = useState('');
  const [spotlightLink, setSpotlightLink] = useState('');
  const [refresh, setRefresh] = useState(false);
  const [keyHook, setKeyHook] = useState(null);
  const [startCollect, setStartCollect] = useState(false);
  const linkRef = useRef();
  const userInfo = {username, linkRef, spotlightLabel, spotlightLink, pfpURL, refresh};

  // on initial load, load database to page
  if (!username) {
    firebase.getAuth().onAuthStateChanged(user => {
      if (user) {
        setUsername(user.displayName);
        firebase.getUserInfo(user.displayName).then(result => {
          setSpotlightLabel(result.spotlightLabel);
          setSpotlightLink(result.spotlightLink);
          linkRef.current = result.links;
          if (result.links) {
            Object.values(result.links).forEach(link => {
              AddLinks(link);
            });
          }
        })
      }
    });
  }

  //on refresh (when clicking apply changes button) reload page values with updated database
  useEffect(() => {
    if (refresh) {
      firebase.getAuth().onAuthStateChanged(user => {
        if (user) {
          firebase.getUserInfo(user.displayName).then(result => {
            linkRef.current = result.links;
            Object.values(result.links).forEach(link => {
              AddLinks(link);
            });
          })
          setRefresh(false);
        }
      });
    }
  }, [refresh])
  
  // adding AddLink button will add a new input form
  // adding AddLink with firebase database value will add a new input form with values loaded
  const AddLinks = url => {
    const hooks = { refresh, startCollect, keyHook, setKeyHook };
    if (url) setKeyHook(url);
    setlinkForm([ ...linkForm, <AddLink key={keyHook} keyHook={keyHook} hooks={hooks} /> ]);
  }

  // add link input form
  const AddLink = props => {
    const handleChange = e => setKeyHook(e.target.value);
    return (
      <form noValidate autoComplete="off">
        <br />
        <Link label="Social" onChange={handleChange} value={props.keyHook} /> 
      </form>
    )
  }
  
  // when apply changes is clicked, collect input values from all link input forms
  if (startCollect) { 
    linkForm.forEach(form => {
      linkRef.current = { 
        ...linkRef.current,
        link: form.keyHook,
      }
    });
    firebase.addLinksToUser({ spotlightLabel, spotlightLink, linkRef }).then(() => {
      //force refresh to update userInfo for UserPreview
      setStartCollect(false);
      setRefresh(true);
    });
  }

  return (
      <>
        <LinkBox>
          <ApplyButton onClick={() => setStartCollect(true)}>Apply Changes</ApplyButton>
          <Link label="Website Title" onChange={e => setSpotlightLabel(e.target.value)} value={spotlightLabel} />
          <Link label="Website URL" onChange={e => setSpotlightLink(e.target.value)} value={spotlightLink}/>
          <AddLinkButton onClick={() => AddLinks(null)} />
          <div>{linkForm ? linkForm.map(child => child) : null}</div>
        </LinkBox>
          <div>
            <PhoneOutline>
              <UserPreview userInfo={userInfo}/>
            </PhoneOutline>
          </div>
      </>
  );
}

export default AdminCustomizer;

Answer 1

In AddLink , the key is a restricted keyword and doesn't get propagated as props. Try a different prop name instead of key .

See this link

Try:

<AddLink key={keyHook} keyHook={keyHook} hooks={hooks} />