如何在对象上设置useState数据

时间:2019-06-05 17:06:30

标签: javascript reactjs ecmascript-6 react-hooks

我正在尝试使用useState设置对象,但是我只能获得初始值,任何人都可以看到我在做错什么,有问题的对象是setWishlist,

const CenterModal = props => {
  const [modalData, setModalData] = useState({
    color: 'red',
    title: '',
    description: ''
  });

const onSubmit = e => {
    e.preventDefault();
    props.onHide();
    const wishlistData = {
      color: modalData.color,
      title: modalData.title,
      description: modalData.description,
    };

    //Pass the data to Wishlist component
    props.wishlistdata(wishlistData);
    console.log('wishlistData: ', wishlistData);
  };
 }

const Wishlist = props => {

    const [wishList, setWishList] = useState({
    color: 'red',
    title: '',
    description: ''
  });

  const onWishListDataReceived = wishListData => {
    setWishList({
      color: wishListData.color
      title: wishListData.title,
      description: wishListData.description,
    });
    console.log('wish list data is: ', wishList);
  };

return(    
   <CenterModal
      title="EDIT WISHLIST ITEM"
      show={modalShow}
      onHide={modalClose}
      wishlistdata={e => onWishListDataReceived(e)}
   />
 )
}

在console.log中,我仅获得初始状态,

2 个答案:

答案 0 :(得分:0)

我认为问题是因为每当您调用函数时,都不会传递带有正确信息作为参数的对象。它正在尝试访问占位符上的属性,因此在调用时必须传递正确的信息,否则它将是未定义的。同样不要以为您不需要按键周围的方括号。

答案 1 :(得分:0)

我知道了, 仅供将来参考,

我不得不使用如下所示的useEffects

useEffect(() => {
    console.log('wishlistdata is: ', wishList);
  }, [wishList]);