1. Antd failed to update Radio manually?

Use antD library Radio, wrap radio.group -> Radio in Form, set radio.group value to useState value.

const [uploadFileType, setUploadFileType] = useState(DATA_TYPES.SINGLE_BOUT); setUploadFileType(DATA_TYPES.MULTIPLE_BOUT); <Form initialValues={{ ['dataType']: DATA_TYPES.SINGLE_BOUT, }} > < form. Item name="dataType" label=" dataType" > < radio.group value={uploadFileType}> <Radio Value ={data_types.single_bout}> single </Radio> <Radio value={data_types.multiple_bout}> multiple </Radio> </ radio.group > </ form.item >  </Form>Copy the code

According to the official document, it is because of the Form package:

For form. Item wrapped controls with the name property, the Form control automatically adds value (or another property specified by valuePropName) onChange (or another property specified by trigger), and the data synchronization is taken over by the Form. This results in the following:

  • You no longer need or should use onChange for data collection synchronization (you can use the Form’s onValuesChange), but you can still listen for onChange events.
  • You cannot set the value of the Form field using properties such as the control’s value or defaultValue. The defaultValue can be set using initialValues in the Form. Note that initialValues cannot be dynamically updated by setState, you need to update them with setFieldsValue.
  • Instead of using setState, you can use form.setFieldsValue to dynamically change the form value.

How to set antD single file Upload list to show only the last file?

3. The child component rendering triggers the parent component to re-render, and an error is reported because the request function in useEffect was not cancelled on uninstallation.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

useEffect(() => { init(); console.log('component DoLabel useEffect init.......... '); Return () => {console.log(' Component DoLabel useEffect uninstalls init.......... '); } }, []) const init = async () => { setStartTime(new Date().getTime()); const resultJson = await queryUnmarkedData({projectId}); handleInitData(resultJson, 'init'); }Copy the code

Cause: When a component is uninstalled, an asynchronous request is returned to perform the setState operation while the component is uninstalled! So an error

Solution:

1. Add a flag variable that is false to indicate that the component is uninstalled. Check whether some of this variable is true before setState

2, in useEffect return a request to cancel the operation function, here can encapsulate a custom hooks, see the link: (stackoverflow.com/questions/5…).

Select (antD) {Select (antD) {Select (ANTD);

NaN is an invalid value for the top css style property.