React 项目中使用 ProTable 展示风险数据并根据状态筛选

本示例演示了如何在 React 项目中使用 ProTable 展示风险数据，并根据风险状态进行筛选。
代码示例：
const [riskData, setRiskData] = useState<any>([]);

const getRiskByProject = async (value: string) => {
  const values = form.getFieldsValue();
  const weeks = moment(values.weeklyTime).startOf('week').format('wo');
  const params = {
    bpProjectId: budgetKey,
    week: weeks,
    weeklyTime: `${moment(values.weeklyTime).startOf('week').format('YYYY-MM-DD')} ~ ${moment(
      values.weeklyTime,
    )
      .endOf('week')
      .format('YYYY-MM-DD')}`,
    startTime: moment(values.weeklyTime).startOf('week').format('YYYY-MM-DD'),
    endTime: moment(values.weeklyTime).endOf('week').format('YYYY-MM-DD'),
    riskStatusList: value.split(','),
  };
  setLoading(true);
  try {
    const { data } = await getRiskByProjects(params);
    if (!data) return;
    setLoading(false);
    
    // const formData = data || [];
    setRiskData(data);
    console.log(data, 138);

    // console.log(formData, 137);
  } catch (error) {}
};

useEffect(() => {
  if (paramsData && budgetKey) {
    getRiskByProject(radioValue);
    getProjectPlan();
    getBudgetProjectDis();
    getBudgets();
    getPage1();
  }
}, [paramsData, budgetKey]);

useEffect(() => {
  LeadingType();
}, []);

const radioChange = (e: any) => {
  getRiskByProject(e.target.value);
};

<ContentCard title='风险'>
  <ProTable
    className={Style.table}
    rowKey={'projectId'}
    // scroll={{ x: 1000, y: 170 }}
    columns={columnsRisk}
    dataSource={riskData}
    options={false}
    bordered
    pagination={false}
    search={false}
    style={{ marginTop: '-24px' }}
    loading={loading}
    headerTitle={
      <div className='mile-check-list'>
        <div className='table-radio-box'>
          <Radio.Group defaultValue={radioValue} buttonStyle='solid' onChange={radioChange}>
            <Radio.Button value={'PROCESSING,APPLY_CLOSING,MAKING_MEASURE'}>
              未关闭
            </Radio.Button>
            <Radio.Button value={'SHUTDOWN_HAS_OCCURRED,PROCESS_OFF'}>已关闭</Radio.Button>
          </Radio.Group>
        </div>
        <div className='details-flex'>
          数据截止：<span style={{ fontSize: '12px' }}>{paramsData?.createTime}</span>
        </div>
      </div>
    }
  />
</ContentCard>

**问题分析：**

点击'已关闭'后，页面数据未更新，可能是因为没有正确更新 `radioValue` 状态导致 `getRiskByProject` 函数没有被正确调用。

**解决方案：**

1. **检查 `radioValue` 状态更新：**确认 `radioChange` 函数中是否正确更新了 `radioValue` 状态，可以使用 `console.log(radioValue)` 打印 `radioValue` 值来验证。

2. **确保 `getRiskByProject` 函数被调用：**确认 `radioChange` 函数中是否正确调用了 `getRiskByProject` 函数，并将更新后的 `radioValue` 传入。

**优化建议：**

* 使用 `useEffect` 钩子监听 `radioValue` 状态的变化，并在状态改变时自动调用 `getRiskByProject` 函数更新数据。
* 使用 `console.log` 打印 `radioValue` 和 `riskData` 的值，以便在开发过程中更方便地调试问题。

**代码优化：**

```javascript
useEffect(() => {
  if (radioValue && paramsData && budgetKey) {
    getRiskByProject(radioValue);
  }
}, [radioValue, paramsData, budgetKey]);
通过以上优化，就可以确保在点击 '已关闭' 后，页面数据能及时更新。