useState 初始值未设置

Question

Following is a simplified version of my requirement that is just enough to recreate the issue. Component ColorBox receives a prop from ShowColorComponent that is used to set the initial value of ColorBox.visible state.

import React, { useState } from "react";

export const Container = ({ Component }) => {
  return (
    <>
      <Component />
    </>
  );
};

export const ShowColorComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <>
      <button onClick={handleClick}>click</button>
      <ColorBox isVisible={isVisible} />
    </>
  );
};

export const ColorBox = ({ isVisible }) => {
  const [visible, setVisible] = useState(isVisible);

  console.log(visible);
  console.log(isVisible);

  return (
    <div
      style={{
        widht: "50px",
        height: "50px",
        backgroundColor: "red",
        display: `${visible ? "block" : "none"}`
      }}
    ></div>
  );
};

App.js

import React from "react";
import ReactDOM from "react-dom";
import { Component, ShowColorComponent } from "./demo";

ReactDOM.render(
  <Component ShowColorComponent={ShowColorComponent} />,
  document.querySelector("#root")
);

I probably should use a method to set the parent's ShowColorComponent.isVisible instead of redefining new state new in ColorBox . But why the first time I click on the button, outputs of console.log s shows following?

false
true

Since I'm setting value of isVisible as the initial value, how visible is false?

Here is the CodeSandbox example https://codesandbox.io/s/react-state-issue-sc58k

Answer 1

If your question is why the visible and isVisible are different, that is because the useState runs only the first time the React component is rendered. (Until it is unmounted and mounted again).

If you want to track the change to any variable every time it changes, use the useEffect hook, as in:

useEffect(() => {
    setVisible(isVisible);
  }, [isVisible]);

In your case, you can just delete the const [visible, setVisible] = useState(isVisible); line and use your parent's isVisible in your display:

display: `${isVisible ? "block" : "none"}`

or not even render the div at all with the && operator.

return (
    isVisible &&
    <div
      style={{
        widht: "50px",
        height: "50px",
        backgroundColor: "red"
      }}
    ></div>
  );

Answer 2

When you render ColorBox isVisible is false which also makes visible false as well. But when you click, it doesn't call setVisible . So visible is still false , but the click did call setIsVisible which turned isVisible to true .