在更改另一个组件后渲染组件

Question

在我的应用程序中，我正在添加新产品。 但在我第二次点击后，它出现在列表中。 在 AddProducts 中，我 console.log 更改了列表的数组并且它已经更新。 但是在 mu ProductList 中，单击添加后它不起作用，所以我应用 componentDidUpdate 来对更改做出反应。 此外，我在 App 中使用 useEffect 对从 AddProduct 发送的更改做出反应，但它仅在我第二次单击时才有效。

添加产品

function AddProducts(props) {
  const [newProduct, setNewProduct] = useState({
    productName: ``,
    category: ``,
    groceries: false,
  });
  const [newList, setNewList] = useState(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.concat([
      {
        nazwa: newProduct.productName,
        kategoria: newProduct.category,
        produktSpozywczy: newProduct.groceries,
      },
    ]);
    setNewList(addProduct);
    props.sendNewProductsToParent(newList);
  }

  return (
    <div className={styles.Wrapper}>
      {console.log(newList)}
      <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"
        value={newProduct.groceries}
        onChange={handleChange}
      ></input>
      <p>Is it groceries?</p>
      <button onClick={handleAddNewProduct}>Add new product</button>
    </div>
  );
}

产品列表

class ProductsList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={commonColumnsStyles.App}>
        {console.log(this.props.productsToDisplay)}
        <header className={commonColumnsStyles.AppHeader}>
          <p>Products list</p>
          <ul>
            {this.props.productsToDisplay.map((currProduct, index) => (
              <li key={index} onClick={() => this.addProduct(index)}>
                {currProduct.nazwa}
              </li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

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

  return (
    <div className={styles.appWrapper}>
      {console.log(newProductsList)}
      <AddProducts
        productsToDisplay={produkty}
        sendNewProductsToParent={setNewProductsList}
      />
      <div className={styles.columnsWrapper}>
        <ProductsList
          productsToDisplay={newProductsList}
          sendAddedProductsToParent={setResultToDisplay}
        />
      </div>
    </div>
  );
}

Answer 1

社区解决方案： AddProduct

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 addProduct = {
      nazwa: newProduct.productName,
      kategoria: newProduct.category,
      produktSpozywczy: newProduct.groceries,
    };
    props.sendNewProductToParent((listOfPrimiaryProducts) => [
      ...listOfPrimiaryProducts,
      addProduct,
    ]);
  }

  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"
        value={newProduct.groceries}
        onChange={handleChange}
      ></input>
      <p>Is it groceries?</p>
      <button onClick={handleAddNewProduct}>Add new product</button>
    </div>
  );
}

export default AddProducts;

产品列表

class ProductsList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={commonColumnsStyles.App}>
        <header className={commonColumnsStyles.AppHeader}>
          <p>Products list</p>
          <ul>
            {this.props.productsInShop.map((currProduct, index) => (
              <li key={index} onClick={() => this.addProduct(index)}>
                {currProduct.nazwa}
              </li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

export default ProductsList;

应用程序

function App() {
  const [productsList, setProductsList] = useState(produkty);

  return (
    <div className={styles.appWrapper}>
      <AddProducts sendNewProductToParent={setProductsList} />
      <div className={styles.columnsWrapper}>
        <ProductsList
          productsInShop={productsList}
        />
      </div>
    </div>
  );
}

export default App;