[ad_1]
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 コンポーネント
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
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> ) }
そしてバックエンドルート:
Route::get('/states2', function () { return Inertia::render('ProductsMy'); });
解決策 1
Laravel と React は私の得意分野ではありません。 「setMyState」関数を親コンポーネントから「ProductsMy」コンポーネントに明示的に渡す必要があります。 `setState` でオブジェクトの代わりに関数を使用する[^]
‘{children}’ プロパティは使用されないため、States2 コンポーネントから削除します。
「setMyState」関数をプロップとして「ProductsMy」コンポーネントに渡します –
States2 コンポーネント内 –
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」プロパティを直接使用します。
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> ); }
[ad_2]
コメント