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。

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

1 个答案: