Question 196447 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Issue with state management in react

I am not able to resolve the below issue, hence seeking help here.

I have the below react component which I am navigating to after creating a entity.. Create -> Overview. In the overview I pass the entityId and then Load it via API and render in the overview page.

export default function FlowOverviewComponent() {
  let { flowId = "" } = useParams();

  const [flow, setFlow] = useState<Flow>({
    id: "",
    flowName: "",
    flowDescription: "",
    type: "flow",
  });

  useEffect(() => {
    const loadFlow = async () => {
      const response = await axios.get("http://localhost:8081/flow/".concat(flowId));
      setFlow(response.data);
    }

    loadFlow();
  }, []);

Binding below:

<TextField
              id="outlined-basic"
              label="Flow Name"
              variant="outlined"
              //defaultValue=""
              value={flow.flowName}
              onChange={(e) =>
                setFlow({...flow, flowName: e.target.value})
              }
            />

            <TextField
              id="outlined-basic"
              label="Flow Description"
              variant="outlined"
              //defaultValue=""
              value={flow.flowDescription}
              onChange={(e) =>
                setFlow({...flow, flowDescription: e.target.value})
              }
            />

I am expecting that the flow details are displayed in the controls. But seems like the flow state is being reset.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally what worked is the below:

    const response = await axios.get("localhost:8081/flow/".concat(flowId)); 
let flow : Flow = JSON.parse(response.data); //ADDED THIS PARSING STEP 
setFlow(flow);

  2. 0

    trying using

    setFlow((prevFlow) => {
  return { ...prevFlow, flowName: e.target.value };
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search