嘗試使用 useState 更新數組的內容，但它不起作用

Question

我是新手，正在練習 react.js。 我正在嘗試通過單擊發送按鈕來使用 useState 更新數組的內容，但它並沒有像我預期的那樣工作。

---

下面是我遇到的問題。 Idk 連續添加日期和數字。 在此處輸入圖像描述

另外，以下是我所期望的。 在此處輸入圖像描述

代碼：

import React, { useState, useRef } from 'react';
import classes from '../style/LineChart.module.css'
import { Button, Input } from '@chakra-ui/react';
import { Line } from 'react-chartjs-2'
import {
 Chart as ChartJS,
 CategoryScale,
 LinearScale,
 PointElement,
 LineElement,
 Title,
 Tooltip,
 Legend,
} from "chart.js";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, 
                Tooltip, Legend);

const LineChart = () => {
 const [numData, setNumData] = useState([0]);
 const [date, SetDate] = useState(['']);

 const calVal = useRef(null);
 const chooseDate = useRef(null);


 const onClick = () => {
    setNumData([calVal.current.value]);
    calVal.current.value = '';

    SetDate([chooseDate.current.value]);
    // SetDate([...date, chooseDate.current.value])
    chooseDate.current.value = '';
}

const data = {
    labels: [date],
    datasets: [
        {
            label: 'How many todos can you achieve？',
            fill: true,
            lineTension: 0.1,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'round',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'square',
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#eee',
            pointBorderWidth: 10,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 1,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [numData]
        }
    ]
};

const checkOfDelete = () => {
    let result = window.confirm('Reset. ok?')
    
    if(result) {
        console.log('Delete.');
    } else {
        alert('fail.')
    }
};

return (
    <div mt='2'>
        <Line data={data}/>
        <Input className={classes.input} ref={chooseDate} variant='outline' w='40%' ml='30%' mb='3' mt='3' borderRadius='15px' type='text' label='date' placeholder='Date'/>
        <Input className={classes.input} ref={calVal} variant='outline'  w='54%' ml='23%' mb='3' borderRadius='15px' type='number' label='number' placeholder='How many？'/>
        <br/>
        {data.labels.length < 8 ? <Button colorScheme='teal' ml='21%' mr='2' onClick={onClick}>Send</Button> : <p>date is full.</p>}
        <Button colorScheme='teal' onClick={checkOfDelete} >Reset</Button>
    </div>
)
};

export default LineChart;

---

為了工作得好，我試過這種方式。

const data = {
    labels: [calVal.current.value ,...date],
    datasets: [
        {
            label: 'How many todos can you achieve？',
            fill: true,
            lineTension: 0.1,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'round',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'square',
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#eee',
            pointBorderWidth: 10,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 1,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [chooseDate.current.value,...numData]
        }
    ]
};

但如果是這樣，我會收到如下錯誤：“Uncaught TypeError: Cannot read properties of null (reading 'value')” 有人可以幫我嗎？ 我很抱歉，如果它是非常基本的，但我才剛剛開始..

Answer 1

您將這些值定義為 null。 您只需更新 onClick function 中的值。

 const calVal = useRef(null);
 const chooseDate = useRef(null);

在上面的代碼下面添加

 calVal.current.value = ''
 chooseDate.current.value = ''