中间组件逻辑只被应用一次 React

Question

在这里，我通过中间组件通过道具传递 state。 中间组件有一个处理程序 (onIntermediatePropsHandler) 有一些逻辑 (const formatedAmount = enterAmount += 10;) 对正在传递的数据执行。 看起来逻辑只执行一次。 为什么是这样？

const Parent = () => {

  const onParentPropsHandler = amount => {
    console.log(amount)
  }

  return (
    <div>
      <Intermediate IntermediateToParent={onParentPropsHandler} />
    </div>
  )
}

const Intermediate = (props) => {

  const onIntermediatePropsHandler = enteredAmount => {
    const formatedAmount = enteredAmount += 10;
    props.IntermediateToParent(formatedAmount)
  }

  return (
    <div>
      <Child ChildToIntermediate={onIntermediatePropsHandler} />
    </div>
  )
}

export const Child = (props) => {
  const [index, setIndex] = useState(null)

  const onClickHandler = (index) => {
    setIndex(index + 1);
    props.ChildToIntermediate(index);
  }

  return (
    <div>
      <button onClick={() => onResetState(index)}>Reset Counter</button>
    </div>
  )
}

这给出了控制台日志

在此处输入图像描述

Answer 1

我不确定您要在这里实现什么。 但是如果您想在子本地 state 中设置索引之前格式化索引，那么您应该在设置索引之前调用父 function，如下所示：

const Intermediate = (props) => {
  const onIntermediatePropsHandler = (enteredAmount) => {
    const formatedAmount = (enteredAmount += 10);
    props.IntermediateToParent(formatedAmount);
    return formatedAmount // Return the formated Amount to the children
  };

  return (
    <div>
      <Child ChildToIntermediate={onIntermediatePropsHandler} />
    </div>
  );
};

export const Child = (props) => {
  const [index, setIndex] = useState(null);

  const onClickHandler = (index) => {
    const updatedIndex = props.ChildToIntermediate(index); // You get the updated index
    setIndex(updatedIndex + 1);
  };

  return (
    <div>
      <button onClick={() => onClickHandler(index)}> Counter: {index}</button>
    </div>
  );
};

Answer 2

我不确定您要做什么。 但是如果你想格式化更新的索引，你应该在useEffect function中调用父级function，因为索引是异步设置的，所以你得到的是旧的Z9ED39E2EA931586B76A985A69EZEF。 所以您的孩子 state 将如下所示：

  useEffect(() => {
    props.ChildToIntermediate(index); // Updated index value
  });

  const onClickHandler = (index) => {
    setIndex(index + 1);
  }

这样，在更新索引后，您将根据更新后的索引调用父 function（不再使用旧状态）