Question 73316 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React Not Updating Component? – Reactjs

Im struggling to understand why my <MapWrap> component is not updating with new information. I have the following set up:

const ExternalList = ({ externalData }) => {
    return( 
        <div>
        {externalData.map(({data, meta, idx}) => (
          <div key={idx}>
            {data!= undefined ? <ExternalCardElement key={idx} raw={data} meta={meta}   /> : <></>}
          </div>  
        ))}
      </div>
    );     
}

  const Feed = ({internalData, setMarkerData, externalData}) => {
    useEffect(() => {
      let tmpArr = [];
      internalRaw.docs.forEach((element) => {
        tmpArr.push({ 
          position: {
            lng: parseFloat(element.data().longitude),
            lat: parseFloat(element.data().latitude),
          },
       
        });
      });
      externalData.forEach(({ element }) => {
        if (element) {
          tmpArr.push({
            position: {
              lng: parseFloat(element.longitude),
              lat: parseFloat(element.latitude),
            },
          });
        } 
      });
      setMarkerData(tmpArr);
    }, [internalData, externalData]);
    return(
      <>
      <div>
        { internalData.docs.length > 0 ? (internalData.docs.map((tmp,idx) =><InternalCardElement key={idx} id={tmp.id} raw={tmp.data()} />)) : ( <></> )}
      </div>
      <InviteList externalData={externalData} />
      </>
    )
  }
  const FeedWraper = ({setMarkerData, internalData, externalRaw}) => {   
    const externalData = externalRaw.docs.map(curEle => {
      const [ data, loading, error ] = useDocumentData(curEle.data().ref);
      const meta = curEle;
      return { data, element,loading };
      }); 
      return(
        <>
        {!externalData.loading ?
          <Feed internalData={internalData} externalData={externalData} setMarkerData={setMarkerData} /> 
        :<></>}
        </>
      )
  }

export default function Dashboard() {
  const [markerData,setMarkerData] = useState([])
  const [internalData, internalLoading, error] = useCollection(ineternalQuery);
  const [externalRaw, externalRawLoading, baderror] = useCollection(externalQuery);
  return (
    <div>
    <div>
        {!internalLoading && !externalRawLoading ?
        <FeedWraper internalData={internalData} externalRaw={externalRaw} setMarkerData={setMarkerData}/>
        :<></>}
    </div>
    <div>
    <MapWrap  markerData={markerData} defaultLocation={false} />  
    </div>
    </div>
  )
}

This creates an infinite rerender but I’m not sure why since the dependencies array of the useEffect() does not change.

Ive tried, without useEffect() and without useState(). I either have an ininite loop of renders or the changes to the marker array does not trigger a rerender.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was because I had an improper check of a loading variable in the <FeedWrapper/> component. Altering the check to the following code made sure that externalData was actually done loading. Which then allowed me to update state in the child components.

     return(
        <>
        {externalData.length == internalData.docs.length ?
        <>
          {externalData.length === 0 || externalData[externalData.length-1].loading === false  ?
          <Feed internalData={internalData} externalData={externalData} setMarkerData={setMarkerData} /> 
          :<></>}
        </>
        :<></>}
        </>
      )

  2. 0

    First, not sure this works, <FeedWrapper (setMarkers)>. It should be <FeedWrapper setMarkers={setMarkers}>

    Lets go by what I am finding problems with your code.
    With FeedWrapper you have Feed as child, which has InternalList and ExternalList as children.
    You have sent setMarkers in FeedWrapper. But in component const FeedWraper = ({markerData}) => { .
    Here you should have only setMarkers as that is the props you send. And you should have send like this, <FeedWrapper setMarkers={setMarkers}>
    Also you provided children such as Feed. But in FeedWrapper component you used Feed Component again. If you could create a sample code snippet in code snadbox. I might help you with that. Because, in code example, it seems to many react basic mistake.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search