React新增产品后列表需二次点击才显示的问题排查

问题原因 #

• 子组件状态与父组件不同步：你在AddProducts组件内部用useState初始化了newList，但这个初始值仅在组件挂载时生效，后续父组件的产品列表更新时，子组件的newList不会自动同步。同时，App组件传给AddProducts的是初始的produkty，而非实时的newProductsList，导致子组件始终基于旧数据操作。
• 异步状态更新导致传值错误：setNewList是异步操作，你在调用它后立刻用newList传给父组件，此时newList还是更新前的旧数组，父组件拿到的是无效数据，第二次点击时才会传递上一次的新数据，因此列表需二次点击才会更新。

解决方案 #

方案1：移除子组件内部状态，直接操作父组件状态 #

不需要在AddProducts里维护列表状态，直接基于父组件传递的最新列表生成新数据，同步更新父组件状态即可。

修改后的AddProducts组件：

function AddProducts(props) {
  const [newProduct, setNewProduct] = useState({
    productName: ``,
    category: ``,
    groceries: false,
  });

  function handleChange(event) {
    event.preventDefault();
    setNewProduct({
      ...newProduct,
      [event.target.name]:
        event.target.type === "checkbox"
          ? event.target.checked
          : event.target.value,
    });
  }

  function handleAddNewProduct() {
    const newProductItem = {
      nazwa: newProduct.productName,
      kategoria: newProduct.category,
      produktSpozywczy: newProduct.groceries,
    };
    // 基于父组件最新列表生成新数组并传递
    props.sendNewProductsToParent([...props.productsToDisplay, newProductItem]);
    // 清空输入框
    setNewProduct({
      productName: ``,
      category: ``,
      groceries: false,
    });
  }

  return (
    <div className={styles.Wrapper}>
      <p>Add products</p>
      <input
        name="productName"
        value={newProduct.productName}
        onChange={handleChange}
      ></input>
      <input
        name="category"
        value={newProduct.category}
        onChange={handleChange}
      ></input>
      <input
        name="groceries"
        type="checkbox"
        checked={newProduct.groceries} {/* 复选框需用checked绑定，而非value */}
        onChange={handleChange}
      ></input>
      <p>Is it groceries?</p>
      <button onClick={handleAddNewProduct}>Add new product</button>
    </div>
  );
}

方案2：同步子组件与父组件状态（若需在子组件展示列表） #

如果需要在AddProducts内也展示产品列表，需确保子组件状态能同步父组件的更新：

首先修改App组件，传递最新的newProductsList给子组件：

function App() {
  const [resultToDisplay, setResultToDisplay] = useState(``);
  const [newProductsList, setNewProductsList] = useState(produkty);

  return (
    <div className={styles.appWrapper}>
      <AddProducts
        productsToDisplay={newProductsList} {/* 传递实时更新的列表 */}
        sendNewProductsToParent={setNewProductsList}
      />
      <div className={styles.columnsWrapper}>
        <ProductsList
          productsToDisplay={newProductsList}
          sendAddedProductsToParent={setResultToDisplay}
        />
      </div>
    </div>
  );
}

然后在AddProducts中用useEffect监听父组件props变化，同步内部状态：

function AddProducts(props) {
  const [newProduct, setNewProduct] = useState({
    productName: ``,
    category: ``,
    groceries: false,
  });
  const [newList, setNewList] = useState(props.productsToDisplay);

  // 监听父组件列表变化，同步子组件状态
  useEffect(() => {
    setNewList(props.productsToDisplay);
  }, [props.productsToDisplay]);

  function handleChange(event) {
    event.preventDefault();
    setNewProduct({
      ...newProduct,
      [event.target.name]:
        event.target.type === "checkbox"
          ? event.target.checked
          : event.target.value,
    });
  }

  function handleAddNewProduct() {
    const addProduct = [...newList, {
      nazwa: newProduct.productName,
      kategoria: newProduct.category,
      produktSpozywczy: newProduct.groceries,
    }];
    // 直接传递新生成的数组，避免异步状态更新的延迟问题
    props.sendNewProductsToParent(addProduct);
    setNewProduct({
      productName: ``,
      category: ``,
      groceries: false,
    });
  }

  return (
    <div className={styles.Wrapper}>
      <p>Add products</p>
      <input
        name="productName"
        value={newProduct.productName}
        onChange={handleChange}
      ></input>
      <input
        name="category"
        value={newProduct.category}
        onChange={handleChange}
      ></input>
      <input
        name="groceries"
        type="checkbox"
        checked={newProduct.groceries}
        onChange={handleChange}
      ></input>
      <p>Is it groceries?</p>
      <button onClick={handleAddNewProduct}>Add new product</button>
    </div>
  );
}

额外注意：复选框的状态绑定需使用checked属性，而非value，之前的代码中此处存在错误，已在修改后的代码中修正。

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