react js中分别状态和一起状态的区别

Question

我把状态写成

 const [state,setState] =useState({
    type:false,
    imageSrc:'',
    captionImage:'',
    showImage:false,
});

当改变状态时

setState({type:true});
setState({captionImage:'hellooo'});
setState({imageSrc:link});

并将其发送到另一个组件，该组件中有未定义的， 但是我把 state 写成

const [type, setType] = useState(false);
const [imageSrc, setImageSrc] = useState('');
const [captionImage, setCaptionImage] = useState(false);
const [showImage, setShowImage] = useState(false);

当改变状态时

setType(true);

并将其发送到另一个组件，该组件中没有问题。

Answer 1

因为在第一种形式中，当您设置新状态而不是像这样传递新的完整对象时：

{
    type:false,
    imageSrc:'',
    captionImage:'',
    showImage:false,
}

您正在将您的状态设置为：

{type:true}

其他的道具都不见了，如果你只想替换你所在州的一个道具（例如type，在保留其他道具的同时，你可以这样做：

setState({ ...state, type: 'new value' })