イベントハンドラーを呼び出すチェックボックスがあります
<Form.Check label='Januar 2019' id='jan19' onChange={handleCheck} />
<Form.Check label='Februar 2019' id='feb19' onChange={handleCheck} />
これはhandleCheck関数です
function handleCheck (event) {
// create the array with the valid months for 2019
if (event.target.id === 'jan19' && event.target.checked) validMonths2019.push('01')
if (event.target.id === 'feb19' && event.target.checked) validMonths2019.push('02')
}
そしてこれは配列
const validMonths2019 = []
console.logをhandleCheck関数内に入れると、データが入力されます。しかし、関数の外側は空です。どうすればこれを修正できますか？後でPOSTリクエストでこの配列を送信する必要があります
useEffect(() => {
if(buttonValue === 'create') {
// Reset the state of the stateful components
setAlertValue(null)
setLoading(true)
setStatus(null)
// here the array is emtpy..
console.log(validMonths2019)
axios
.post('http://localhost:5000/', {
contractId: contractId,
contractCompletionQuote: contractCompletionQuote,
iterations: iterations,
validMonths2019: validMonths2019
})
フックを使用した状態でvalidMonths2019を配列として設定してみてください。
const [ validMonths2019, setValidMonths2019 ] = useState([]);
次に、ハンドラーを実行して、変更するたびにリセットされないようにします。
handleAddMonth = (newValue) => {
const newArray = [ ...validMonths2019 ];
newArray.push(newValue);
setValidMonths2019(newArray);
}
そうすれば、データが状態に保存され、必要なときにいつでも使用できるようになります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加