调用子组件中的函数未在反应 js 中设置父状态

Question

I'm calling a function in my child component that is passed to child with props , and in this function I want to change parent's state but it not work; all of values passed true but setItems not work and I don't know what can I do . it is my child component :

export default function CartableList(props) {

function handleCallDetails(id, org) {
        (props.handleSetItems)(items); // items that passed are true
    }
.
.
.

return (
.
.
.
<Link
      to={{
            pathname: `/${window.location.pathname.split('/')[1]}/${props.orgID}/approval/cartable/details/${item.id}`,
                                        search: `?current=${props.mode}`,
                                    }}
                                    onClick={() => handleCallDetails(item.id)}
                                    className="drt_ItemLinkEl" />
.
.
.
);
.
.
.
}

There is my parent component :

export default function Cartable(props) {

    const [items, setItems] = useState(null);

function handleSetItems(val) {
        // val is true but setItems not work
        setItems(...val);
    }

console.log('items : ' , items); // always show null and can not pass items to another component beacause it's null

Answer 1

You should be using props.items in place of items while calling the props. handleSetItems props. handleSetItems

Answer 2

function handleCallDetails(id, org) {
        (props.handleSetItems)(items);
    }

in this funtion you are not using any of the argument you get(id ,org). and in here:

onClick={() => handleCallDetails(item.id)}

your passing id but in component you expect to get array

and why there is a onClick in a Link, when page changes state get back to initial state.