React中使用useState处理对象：保存对话框字段为空问题求助

问题原因 #

• useState异步更新特性：React的setState是异步操作，调用setFilm后，film状态不会立刻更新，所以紧接着执行的console.log(film)打印的是更新前的旧初始值（空字符串）。
• 冗余状态维护：同时维护title/description和film两个独立状态，这种设计不仅增加代码复杂度，还容易引发状态不同步问题。

解决方案 #

方案1：正确获取更新后的状态（保留现有结构） #

如果要保留当前的状态拆分方式，可通过两种方式查看最新值：

1. 直接打印用于更新的title和description变量（它们是当前最新的输入值）：

const saveDialog = () => {
  const newFilm = {
    title: title,
    description: description,
  };
  setFilm(newFilm);
  console.log("before create");
  console.log(newFilm); // 打印最新的表单值
  console.log("after create");
  close();
};

2. 使用useEffect监听film状态变化，在状态更新完成后打印：

import { useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  console.log("film updated:", film);
}, [film]);

方案2：优化状态结构（推荐） #

合并冗余状态，直接用film管理所有表单字段，减少状态维护成本：

const FilmCreate = (props) => {
  const [showModal, setShowModal] = useState(false);
  const [film, setFilm] = useState({
    title: "",
    description: "",
  });

  const saveDialog = () => {
    console.log("before create");
    console.log(film); // 此时film已是最新输入值
    console.log("after create");
    close();
  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFilm(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const close = () => setShowModal(false);
  const open = () => setShowModal(true);

  return (
    <div>
      <Button color="primary" onClick={open} className="float-right">
        Add Film
      </Button>
      <Modal isOpen={showModal} toggle={close} size="lg" autoFocus={false}>
        <ModalHeader toggle={close}>Show Film</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup row>
              <Label md={2} for="formTitle">
                Title
              </Label>
              <Col md={10}>
                <Input
                  type="text"
                  id="formTitle"
                  name="title"
                  onChange={handleInputChange}
                  value={film.title}
                />
              </Col>
            </FormGroup>

            <FormGroup row>
              <Label md={2} for="formDescription">
                Description
              </Label>
              <Col md={10}>
                <Input
                  type="text"
                  id="formDescription"
                  name="description"
                  onChange={handleInputChange}
                  value={film.description}
                />
              </Col>
            </FormGroup>

            <FormGroup>
              <Col className="clearfix" style={{ padding: ".2rem" }}>
                <Button
                  className="float-right"
                  color="secondary"
                  onClick={saveDialog}
                >
                  Save
                </Button>
              </Col>
            </FormGroup>
          </Form>
        </ModalBody>
      </Modal>
    </div>
  );
};

export default FilmCreate;

该方案优势：

• 仅维护一个film状态，彻底避免状态不同步问题
• 用通用的handleInputChange处理所有输入变化，代码更简洁易维护

内容的提问来源于stack exchange，提问作者Tempo