SoFunction
Updated on 2025-04-11

Problems and solutions for the value and text when data backfilling in react

Problem of value and text when data backfilling in react

When entering the edit page of the form in react, the newly created data needs to be backfilled. If it is in the form of {}, it needs to correspond one by one. If it is in the form of [], it requires a separate value. It means that it does not accept an array object, that is, the form of [{},{},{}] Solution: borrow the object and use the key to find the value

// Enter the edit page Backfill of the multi-select box (convert it to an object form, use the key to find the value)let reversedynamicDataObj = {};
let result = [];
((i) => {
         ()
         .split(',')
         .map((ele) => {
     			reversedynamicDataObj[ele] = {
                      value: { name: , id: ele },
                      key: ele,
                 };
        		(reversedynamicDataObj[ele]['key']);
           });
});
 = result;
(Data);

Use setFieldsValue for your own components in react

How to use setFieldsValue

setFieldsValue is an API of antd form, which is used to set the value of the specified form that has been wrapped with from. So its function is also very simple, that is, set the value for the specified input. As shown below:

import React from "react";
import { Form, Input } from 'antd';
class TestForm extends  {
  componentDidMount(){
    const { setFieldsValue } = ;
    // Here you can implement the specified form setting value	setTimeout(()=>{
		setFieldsValue({"username": "Tom"})
	},5000)
  }
  render() {
    const { getFieldDecorator } = ;
    return (
      <Form >
        <>
          {getFieldDecorator('username', {})(<Input />)}
        </>
      </Form>
    );
  }
}
export default ()(TestForm)

question

Then if

{getFieldDecorator('username', {})(<Input />)}

Change to

{getFieldDecorator('username', {})(<TestInput />)}

Where did the value setFieldsValue go? I believe that you can see through it at a glance, so naturally it is on TestInput. If TestInput is our custom component, then we can find the value property in props. If our Input is a custom input component, we can write it like this.

import React from "react";
import { Input } from 'antd';
class TestInput extends  {
	state = {
		value: ""
	}
	componentWillReceiveProps(nextProps){
		if(){
			({
				value: 
			})
		}
	}
	render() {
	    return (
	      <div >
	          <Input value={}/>
	      </div>
	    );
  	}
}
export default TestInput

This way, we can set custom components using setFieldsValue.

This is the article about the problem of value and text when backfilling data in react. For more related data backfill content in react, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!