React - Cannot update component while render different component / Provided 'checked' with-CodePudding

I've a problem within my CartScreen. It's about chosing payment method. It worked everything fine all the time and today i open the cartscreen and i got a lot of error but if I remember correctly i didn't touch this component for quite some time...

Here i call the component in my CartScreen:

const [sliderPaymentValue, setSliderPaymentValue] = useState('');

<PaymentChoice
 setState={setSliderPaymentValue}
/>

And this is my PaymentChoice component:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { systemSettings } from '../../../redux/actions/systemSettingsAction';
import './optionPicker.css';

const PaymentChoice = ({ setState }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(systemSettings());
  }, []);

  const settingsstate = useSelector((state) => state.systemSettingsReducer);
  const { settings } = settingsstate;

  //console.log(settings[0]?.payments);

  function handleChange(event) {
    setState(event.target.value);
  }
  return (
    <div className='border-1 border-red-500 flex justify-center'>
      {settings[0]?.payments.map((payment) => {
        return (
          <div>
            <div className=''>
              <input
                checked={settings[0]?.payments.length === 1 ? 'checked' : null}
                type='radio'
                id={payment.value}
                name='payment'
                value={payment.value}
                onChange={
                  settings[0]?.payments.length === 1
                    ? setState(payment.value)
                    : handleChange
                }
              ></input>
              <label className='inline-block w-32' for={payment.value}>
                <img
                  src={`/images/${payment.value}.png`}
                  alt={`${payment.value}.png`}
                  className='max-h-[50px] mx-auto'
                />
                <div className='text-center'>{payment.label}</div>
              </label>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default PaymentChoice;

Edit: If i use bargeld (german word for cash money) it works (This is one of 2 options you can choose from PaymentChoice one has "paypal" and the other "bargeld"

const [sliderPaymentValue, setSliderPaymentValue] = useState('bargeld');

CodePudding user response：

it seems like your error is in the CartScreen page where you imported the PaymentChoice component, check it once that it isn't being imported like ''' import { PaymentChoice } from 'filepath' ''' instead it should simply be import PaymentChoice from 'filepath'

And if you added the onChange function later or something and it still isn't working, one thing you can do is use just an arrow function instead of the turnory operator, and if you're using this settings[0]?.payments.length, it might be better to define a const for it before you're using the map function

CodePudding user response：

The Problem was about useState...

Before it was sliderPaymentValue === 0
Change it with a empty String fixed it
 
{sliderPaymentValue === '' ? (
 ''
 ) : sliderPaymentValue === 'bargeld' ? (
 <div onClick={cashTranSuccess}>
 <CashButton />
 </div>
 ) : (
 <PayPalButton
 />
)}