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

Question

我有表格 fn

代码在这里#update代码。我初始化

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

不是初始化网址

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'}

但是我更改了电子邮件字段中的值。查询没有给出旧值“{filed:'abc'}”，我使用 ES6 三个点。

query2 : {email: 'xyz'}

和查询功能始终初始化

query: {}

图像变化值

#更新图像：当我更改值 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 并参考此处。 在此处输入链接描述