【解決方法】Setmystate は関数ではありません

Reactを使用したLaravel 10プロジェクトがあります。

「バスケットに追加」ボタンをクリックした後、バスケットの props.myState を 1 つ増やしたいと考えています。次のように、States2 コンポーネントで ProductsMy コンポーネントを使用すると機能します。

<productsmy products3="{products3}" mystate="{myState}" setmystate="{setMyState}/">

しかし、それを {children} prop でレンダリングしたいと考えています。一行下。

{/*<productsmy products3="{products3}" mystate="{myState}" setmystate="{setMyState}/">*/}
            {children}

{children} を使用するときにボタンをクリックすると、「setMyState は関数ではありません」というメッセージが表示されます。

Uncaught TypeError: setMyState is not a function
    at handleToBasketClick (ProductsMy.jsx?t=1689842814849:23:5)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
    at executeDispatch (react-dom.development.js:9041:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
    at processDispatchQueue (react-dom.development.js:9086:5)
    at dispatchEventsForPlugins (react-dom.development.js:9097:3)
    at react-dom.development.js:9288:12

子の場合、コンポーネントはこれを取得しないと思います。

myState={myState} setMyState={setMyState}

{children} で使用するにはどうすればよいですか? ProductsMy コンポーネントは次のようにロードされます。

{children}

ProductsMy コンポーネントのコメントを解除すると機能します。

私が試したこと:

コードは次のとおりです。

States2 コンポーネント

JavaScript

import {useState} from 'react';

function Basket(props) {
    return (
        <>
            <h1>In basket: {props.myState} DB</h1>
        </>
    );
}

export default function States2({children}) {
    const [myState, setMyState] = useState(0);

    return (
        <div className="App">
            <header className="App-header">
                <Basket myState={myState}/> {/* Show Basket komponent */}
            </header>
            {/*<ProductsMy products3={products3} myState={myState} setMyState={setMyState}/>*/}
            {children}
        </div>
    );
}

製品My.jsx

JavaScript

import Button from "react-bootstrap/Button";
import States2 from "@/Pages/States2.jsx";

export default function ProductsMy({myState, setMyState}) {
    const handleToBasketClick = () => {
        setMyState(myState + 1);
    };

    const products3 = [
        {title: 'Product 1'},
        {title: 'Product 2'},
        {title: 'Product 3'},
        {title: 'Product 4'},
        {title: 'Product 5'},
    ]

    return (
        <States2>
            <div>
                {products3.map((product, index) => (
                    <div className="flex items-center" key={index}>
                        <div>{product.title}</div>
                        <Button onClick={handleToBasketClick}>Add to Basket</Button>
                    </div>
                ))}
            </div>
        </States2>
    )
}

そしてバックエンドルート:

PHP

Route::get('/states2', function () {
    return Inertia::render('ProductsMy');
});

解決策 1

Laravel と React は私の得意分野ではありません。「setMyState」関数を親コンポーネントから「ProductsMy」コンポーネントに明示的に渡す必要があります。 `setState` でオブジェクトの代わりに関数を使用する [^]

‘{children}’ プロパティは使用されないため、States2 コンポーネントから削除します。
「setMyState」関数をプロップとして「ProductsMy」コンポーネントに渡します –

States2 コンポーネント内 –

jsx

import { useState } from 'react';
import Basket from './Basket'; //You have to import the Basket component for it to work

export default function States2() {
  const [myState, setMyState] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <Basket myState={myState} />
      </header>
      <ProductsMy myState={myState} setMyState={setMyState} /> {/* Pass the setMyState function as a prop */}
    </div>
  );
}

「ProductsMy」コンポーネントの「handleToBasketClick」関数で「setMyState」プロパティを直接使用します。

jsx

import Button from 'react-bootstrap/Button';

export default function ProductsMy({ myState, setMyState }) {
  const handleToBasketClick = () => {
    setMyState(myState + 1);
  };

  const products3 = [
    { title: 'Product 1' },
    { title: 'Product 2' },
    { title: 'Product 3' },
    { title: 'Product 4' },
    { title: 'Product 5' },
  ];

  return (
    <div>
      {products3.map((product, index) => (
        <div className="flex items-center" key={index}>
          <div>{product.title}</div>
          <Button onClick={handleToBasketClick}>Add to Basket</Button>
        </div>
      ))}
    </div>
  );
}