useState react error Too many re-renders mergin state props input-CodePudding

I am having problems with updating state by mergin selected input props in one string in order to pass a proper path with values to API.

I have something like this in logic :

    const [data, setData] = useState({ certificate: '', year: '' })
    
    const merge = () =>{if(data.certificate!==''){(setData(Object.values(data).join("")))}}
      merge()

  useEffect(() => {
    (async () => {
      try {
        const params = {
          data,
        }
        const result = await service.getBackendData({ params})

        if (result.error) throw result.error

        setList(result)
      } catch ({ message }) {
        console.error('error', message)
      }
    })()
  }, [data])

The purpose of the code is to get two strings values from the form component (I am using Formik) and this actually works just fine. But then, two values inside the state (certificate and year props) must be merged in one string in order to send a proper path to API and get response.

useEffect part also works, if i use values separetely, but in this particular matter i must find a way to connect these two above in one string.

I tried to create a merge function under condition that user select and thus pass a certificate value, but that only delayed a render error. After the value is selected, function ofcourse works and join two values, but an infitie loop is created.

I read that changing state in a rendering phase is not a good idea (to put it mildly), so i cannot do this in that way. So far i run out of ideas. What I am missing ?

Below the part of the Form code, concerning these values. While clicking, user pass from selected options a certificate value, and then i must merge it with year value in one string.

  const initialValue = {
    CERTIFICATE: '',
    YEAR: '&0',
  }
                     <S.CustomSelect
                      name={certificateInput.certificate.name}
                      placeholder={certificateInput.certificate.placeholder}
                      onClick={setData((prevState) => ({
                        ...prevState,
                        certificate: values.CERTIFICATE,
                      }))}
                    >
                      {certificatesValues.map((item) => (
                        <Option key={item.name} value={item.symbol}>
                          {item.name}
                        </Option>
                      ))}
                    </S.CustomSelect>

CodePudding user response：

When onClick event triggers you're setting state and react initiate re-evaluation process and re-render the component, as re-render happens, merge() would be called and this time your if conditions get true and call the setData() to set data state, react again re-render your component, merge() will again be called and this cycle goes on. Move merge() inside useEffect() to make this work

CodePudding user response：

Your issue is in below part

const merge = () =>{if(data.certificate!==''){(setData(Object.values(data).join("")))}}
merge()

You are calling merge() on the rendering part

I think you can fix this issue by moving merge() to useEffect

const [data, setData] = useState({ certificate: '', year: '' })

useEffect(() => {
    (async () => {
      let params = data
      if(data.certificate!==''){params = Object.values(data).join(""))}
      try {
        result = await service.getBackendData(params);

        if (result.error) throw result.error

        setList(result)
      } catch ({ message }) {
        console.error('error', message)
      }
    })()
  }, [data])