Question

我试图通过抬高状态并将其作为道具传递给其他组件并尝试更新它来更新某个组件上单击的某些事物的状态。

这是App.js

function App() {
  const [currentConfig, setCurrentConfig] = useState(0);
  const availableConfigs = [
    { id: 1, name: "Config 1", number: 1, key: 1 },
    { id: 2, name: "Config 2", number: 2, key: 2 },
    { id: 3, name: "Config 3", key: 3 },
    { id: 4, name: "Config 4", key: 4 },
    { id: 5, name: "Config 5", key: 5 },
    { id: 6, name: "Config 6", key: 6 },
    { id: 7, name: "Config 7", key: 7 },
  ];

  const [configs, setConfigs] = useState(availableConfigs);

  //function undoConfigAnimation(currentConfig) {}

  return (
    <div>
      <Tree
        configs={configs}
        animateConfigs={startConfigAnimation}
        setConfig={setCurrentConfig}
        currentConfig={currentConfig}
      />
      <NavBar />
    </div>
  );

  function startConfigAnimation(configClicked) {
    console.log(currentConfig);
    configs.forEach((config) => {
      if (configClicked !== config.name) {
        var elm = document.getElementById(config.name);
        elm.style.transform = "translate(-200px)";
        setTimeout(() => (elm.style.transform = "rotateZ(180deg)"), 1000);
      }
    });
  }
}

export default App;

这是组件

function Tree(props) {
  return (
    <div class="treeContainer">
      {props.configs.map((config) => {
        return (
          <div
            id={config.name}
            class="container1"
            onClick={() => {
              props.setConfig(config.name);

              props.animateConfigs(config.name);
              if (props.currentConfig !== config.name) {
                props.setConfig.bind(config.name);
              }
            }}
          >
            <Configs configNumber={config.number} configName={config.name} />
          </div>
        );
      })}
    </div>
  );
}
export default Tree;

当前，它确实会更新状态，但只会将其更新为单击前的状态，因此，如果currentConfig === 0，则示例输出如下所示

单击配置1 currentConfig = 0 单击配置2 currentConfig =“配置1”

Answer 1

由于setState是异步的，所以console.log将始终位于后面。这并不意味着状态没有更新，而是仅不显示在控制台中或尚不可用。

因此流程将是：

您调度更改。
您调用了startConfigAnimation，但它仍处于同步状态，因此currentConfig仍然是先前的值。
使用新值更新状态。

有2种解决方法：

使用useEffect：如果配置发生更改，请使用useEffect收听currentConfig并触发动画。

React.useEffect(() => startConfigAnimation(currentConfig), [currentConfig])

您已经将新的/更新的配置传递给startConfigAnimation，因此您可以使用它。

通过带有挂钩的道具更新状态

1 个答案: