Why query not updated value but get initial value in Function with ExtReact

Question

I have form fn

code here #update code. I initialization

query = {
   field: '',
   email: '',
 }

not initialization url

export function HomePage() {
const [query, setQuery] = useState({
    field: '',
    email: '',
});
const handleChaneValue = (value) => {
// not received data on change
    console.log('query', query);
    setQuery({
        ...query,
        [value.sender.name]: value.newValue
    })
}
console.log('query2', query);

query2 received data on change

console.log('query2', query);

#Update code: I add

return (
    <div>
        <Container
            padding={10}
            platformConfig={{
                desktop: {
                    maxWidth: 400,
                }
            }}
        >
            <FormPanel
                padding={10}
                shadow
                defaults={{
                    errorTarget: 'under'
                }}
                margin="0 0 20 0"
                title="Using Validators"
            >
                <Textfield
                    required
                    label="Required Field"
                    requiredMessage="This field is required."
                    errorTarget="under"
                    name="field"
                    onChange={handleChaneValue}

                />
                <EmailField
                    label="Email"
                    validators="email"
                    errorTarget="under"
                    name="email"
                    onChange={(e) => handleChaneValue(e)}

                />
             <Urlfield
                    label="URL"
                    validators={{
                        type: 'url',
                        message: 'Website url example http://'
                    }}
                    errorTarget="under"
                    name="url"
                    onChange={handleChaneValue}

                />
                <Container layout="center">
                    <Button 
                      ui="confirm" 
                      text="BTN submit" 
                      handler={handleClick} 
                      style={{border: '1px solid black' }}/>
                </Container>
            </FormPanel>

        </Container>
    </div>
)

} export default HomePage;

When I change value in TextField. Query is

query2: {field: 'abc'}

But i change value in Email field. Query is not give old value "{filed: 'abc'}" throught I use ES6 three dot.

query2 : {email: 'xyz'}

and Query in funciton always initialization

query: {}

image change value

#Update image: when I change value Url. fn handleChangeValue get initialization query

query: { field: '', email: '', }

does not value query updated.

score 0 · Accepted Answer · answered Oct 21 '21 at 07:53

here issues were you did not initialize the value of textfield and emailfield I updated code pls check now

export function HomePage() {
  const [query, setQuery] = useState({
    field:'',
    email:''
  });
  const handleChaneValue = (value) => {
    // not received data on change
    console.log("query", query);
    setQuery({
      ...query,
      [value.sender.name]: value.newValue,
    });
  };
  console.log("query2", query);
  return (
    <div>
      <Container
        padding={10}
        platformConfig={{
          desktop: {
            maxWidth: 400,
          },
        }}
      >
        <FormPanel
          padding={10}
          shadow
          defaults={{
            errorTarget: "under",
          }}
          margin="0 0 20 0"
          title="Using Validators"
        >
          <Textfield
            required
            label="Required Field"
            requiredMessage="This field is required."
            errorTarget="under"
            name="field"
            onChange={handleChaneValue}
            value={query.field}
          />
          <EmailField
            label="Email"
            validators="email"
            errorTarget="under"
            name="email"
            value={query.email}
            onChange={handleChaneValue}
          />
          <Container layout="center">
            <Button
              ui="confirm"
              text="BTN submit"
              handler={handleClick}
              style={{ border: "1px solid black" }}
              
            />
          </Container>
        </FormPanel>
      </Container>
    </div>
  );
}
export default HomePage;

@HoangLe here you put wrong text field it should be `TextField` — Kanti vekariya, Oct 21 '21 at 08:37
I tried. I am understanding the problem is that every time query initialize value in function is run, it is always initialized to {} but not the updated query value. like the console.log image — Hoang Le, Oct 21 '21 at 09:17
@HoangLe it always displays {} bcz you console before update state pls put after update state — Kanti vekariya, Oct 21 '21 at 09:52
first onChange query been updated when set state. it is shown in console.log query2, However the next onchange query doesn't get the updated value, but gets the initial value. it is shown in console.log query — Hoang Le, Oct 21 '21 at 15:13

score 0 · Answer 2 · answered Oct 21 '21 at 16:44

0

I found the solution to the problem. I using framework ExtReact so when run function, states re-initialized initil value. To solve this problem you can useRef and refer here. enter link description here

answered Oct 21 '21 at 16:44

Hoang Le

25
1
6

Why query not updated value but get initial value in Function with ExtReact

2 Answers2