为什么使用 ExtReact 查询不更新值但在函数中获取初始值

Question

我有表格 fn

代码在这里 #更新代码。我初始化

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

未初始化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 收到更改数据

console.log('query2',查询);

#更新代码：我添加

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>
)

} 导出默认主页；

当我更改 TextField 中的值时。查询是

query2: {field: 'abc'}

但我更改了电子邮件字段中的值。通过我使用 ES6 三点，查询未提供旧值“{filed: 'abc'}”。

query2 : {email: 'xyz'}

和函数中的查询总是初始化

query: {}

图像变化值

#Update 图像：当我更改值时 Url。 fn handleChangeValue 获取初始化查询

查询：{ 场地： ''，电子邮件： ''， }

未更新值查询。

Answer 1

这里的问题是你没有初始化文本字段和电子邮件字段的值我更新了代码请现在检查

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;

Answer 2

我找到了问题的解决方案。我使用框架 ExtReact 所以当运行函数时，状态重新初始化初始值。要解决此问题，您可以使用 Ref 并在此处参考。 enter link description here

为什么使用 ExtReact 查询不更新值但在函数中获取初始值

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

extreact