react-state-management

问题 OperationSavDetails.js class OperationSavDetails extends Component { constructor(props) { super(props); this.state = { statusUpdateDropDownOpen: false, statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV" }; this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind( this ); this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind( this ); } changeStatusUpdateDropDownValue(e) { console.log("e.currentTarget.textContent"); console.log(e

问题 OperationSavDetails.js class OperationSavDetails extends Component { constructor(props) { super(props); this.state = { statusUpdateDropDownOpen: false, statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV" }; this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind( this ); this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind( this ); } changeStatusUpdateDropDownValue(e) { console.log("e.currentTarget.textContent"); console.log(e

问题 I have a parent component called EnrollForm with a BrowserRouter that routes to different sub-components which are the pages of my overall EnrollForm. Each time a sub-component page is filled out and next btn is clicked, all form fields are saved to sub-component state obj, then that state is passed to the parent EnrollForm state. This flow is working correctly.. however when I added the line of code to href to the next sub-component, the parent EnrollForm state is deleted and so is BioForm's

问题 I have a parent component called EnrollForm with a BrowserRouter that routes to different sub-components which are the pages of my overall EnrollForm. Each time a sub-component page is filled out and next btn is clicked, all form fields are saved to sub-component state obj, then that state is passed to the parent EnrollForm state. This flow is working correctly.. however when I added the line of code to href to the next sub-component, the parent EnrollForm state is deleted and so is BioForm's

问题 I don't understand why React not update my object. In another component through the dispatch I update the state. In this (in code below) code in mapStateToProps categories are changing (console log show one more category). But component not rerender, although in component in useEffect I use props.categories. Event console.log in element does not run const LeftSidebar = (props: any) => { console.log('not render after props.categories changed') useEffect(() => { props.dispatch(getCategories())

问题 I'm curious if passing setState as a prop to a child (dumb component) is violating any "best practices" or will affect optimization. Here is an example where I have the parent container passing state and setState to two child components, where the child components will call the setState function. I do not explicitly call setState in the children, they reference a service to handle the correct setting of state properties. export default function Dashboard() { const [state, setState] = useState

问题 Is there a way to stop react re-rendering if only part of state changes? The problem is that every time I hover on a marker a popup is opened or closed and it causes all the markers to re-render even though mystate is not changing only activePlace state is changing. console.log(myState); is running every time I hover in and out of the marker. I tried to use useMemo hook but couldn't figure out how to use it. Any help? Here is my code: import React, { useEffect, useState } from 'react'; import

问题 Is there a way to stop react re-rendering if only part of state changes? The problem is that every time I hover on a marker a popup is opened or closed and it causes all the markers to re-render even though mystate is not changing only activePlace state is changing. console.log(myState); is running every time I hover in and out of the marker. I tried to use useMemo hook but couldn't figure out how to use it. Any help? Here is my code: import React, { useEffect, useState } from 'react'; import

问题 I have a table like this: When a user clicks on an Edit button, an <input> should appear in its place. If a user clicks on another Edit button, this one will also be replaced with an <input> , and the previous <input> should disappear and show an Edit button again. In short, only one field can be in edit mode at a time. This is my initial state : state = { editnameEnable: false, editemailEnable: false, editaddressEnable: false, edittelephone_noEnable: false, } This is my edit() method: edit =

问题 How can I dynamically set the name of the array in state, to get it from state. onCheckBoxItemClickList(e, value, path) { console.log(e.target.checked) if (e.target.checked) { //append to array this.setState({ [path]: this.state.[path].concat([value]) }) } else { //remove from array this.setState({ [path]: this.state.[path].filter(function (val) { return val !== value }) }) } } I know how to dynamically set and get a key in state, but when I try and do [path]: this.state.[path].concat([value]