reactjs - 反应：父母收到的回调值没有将另一个孩子的最新值作为道具传递| 功能组件

Question

我正在使用功能组件：

我有 1 个父组件和 2 个子组件。

子 1 通过回调将数据传递给父。在父级中，回调值被接收并使用setState它分配给一个变量，并正确地发送给子 2。

但是，当 child 1 进行任何更改并通过回调将数据传递给 parent 时，Parent 不会将另一个子组件中的最新值作为 prop 传递。仍然显示旧值。

图解：

示例代码：

const ContainerComponent = (props) => {
    let [selectedCenterId, setSelectedCenterId] = useState("");

    const callbackFromServiceDetails = (centerId) => {
        setSelectedCenterId((selectedCenterId = centerId));
        console.log("Inside parent callback");
        console.log(selectedCenterId);
    };

  return (  
      <>
        <ChildComponent1 activeTab={activeTab} parentCallback={callbackFromServiceDetails}></ChildComponent1>
        {
            selectedCenterId !== "" ?
            <ChildComponent2 activeTab={activeTab} selectedCenterId={selectedCenterId}></ChildComponent2>
            :
            <></>
        }
      </>
   );
};

export default ContainerComponent;


========================================================================

const ChildComponent1 = ({centersNLocations, actions, ...props}) => {

    const nextButtonClick = e => {
        e.preventDefault();
        props.parentCallback(selectedCenter);
      };

    return (
        <>
        ...
        </>
    );
};



ChildComponent1.propTypes = {
  ...
};

function mapStateToProps(state) {
  return {
    ...
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      ...
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent1);



=====================================

const ChildComponent2 = (props) => {
    let [centerId, setCenterId] = useState(props.selectedCenterId);
    console.log(centerId);

    return (
        <>
        ...
        </>
    );
};

export default ChildComponent2;

任何想法可能导致这样的问题？

Answer 1

我相信问题出在父组件代码中，因为您将引用从 useState 更改为值本身。这条线setSelectedCenterId((selectedCenterId = centerId));你不应该使用相等的运算符，所以你的函数应该如下所示：

  const callbackFromServiceDetails = (centerId) => {
        setSelectedCenterId(centerId);
        console.log("Inside parent callback");
        console.log(selectedCenterId);
    };

未来提示：如果您想保持参考不变，请使用const而不是。let