React：父级中收到的回调值未传递另一个子级中的最新值作为prop |功能组件

Question

我正在使用功能组件：

我有1个父级和2个子级。

子代1通过回叫将数据传递给父代。在父级中，接收到回调值，并使用setState将其分配给变量，并正确发送给子级2。

但是，当子项1进行任何更改并通过回调将数据传递给父项时，父项不会将其他子项组件中的最新值作为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。