useEffect里面更新state，渲染问题

Question

我想要return这里的state数据也更新。 但是useEffect好像只是在页面挂载的时候调用。控制台里面看到的运行顺序是先读取tableData的初始值，然后执行了return里面的内容。所以tableData这时候还是初始值。然后tableData通过useEffect改变数据了，改变完之后并没有重新渲染。 我想要在useEffect改变state以后，根据state新的数据重新渲染，这段代码该如何修改

const [tableData, setTableData] = useState([]);
useEffect(() => {
  async function fetchTableData() {
      getproducts(orderID).then(res=> {    
        setTableData(res)
      })
  };
  if (orderID) fetchTableData(); 
}, [orderID]); 
console.log(tableData); // 这里tableData的数据正常更新了。
return (   
    <Form
      initialValues={ 
        note,
        products: ()=> {
          console.log(tableData) //这里tableData始终是初始值。
        },
      }
    >
 )

Answer 1

你这个 Form 是 antd 的吧，initialValues 只接受第一次传入的数据。要用 Form.useForm 获得 form 对象，在 tableData 改变之后重新 form.setFieldsValue。