React：在 parent 中收到的回调值没有将另一个 child 中的最新值作为 prop 传递 |功能组件

Question

我正在使用函数组件：

我有 1 个 Parent 和 2 个 child 组件。

Child 1 通过回调将数据传递给 parent。在 parent 中，回调值被接收并使用 setState 分配给一个变量，并正确发送到 child 2。

然而，当 child 1 进行任何更改并通过回调将数据传递给 parent 时，Parent 不会将另一个 child 组件中的最新值作为 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)); 你 不应该 使用 equal 运算符所以你的函数应该看起来像：

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

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

React：在 parent 中收到的回调值没有将另一个 child 中的最新值作为 prop 传递 |功能组件

React : Callback value received in parent not passing the latest value in another child as prop | Function component

callback

setstate

reactjs

react-props

react-functional-component