Ag 网格阻止访问 React 状态变量的当前值

Question

const [fromDate, setFromDate] = useState(moment().format('DD/MM/YY'));

function generateColumnDefs(columnDefs) {
  return columnDefs.map(columnDef => {
      if (columnDef.field === 'lob') {
        Object.assign(columnDef, {
          cellRendererFramework: lobLinkRenderer
        });
      }   
    return columnDef;
  });
}

function lobLinkRenderer(params) {
    return (
      <a onClick={() => handleClick(params)}>{params.value}</a>
    );
}

const test=()=>{
    return fromDate;
};

const handleClick = (params) => {
   let myDate1 = fromDate;
   let myDate2 = test();
}

return (
  <div>
     ...
     <button onClick={handleClick}>Test me </button>
  </div>
)

以上代码是构建 agGrid 网格的 React 组件的一部分。某栏内容正在通过cellRendererFramework转化为超链接。单击这些超链接后，将调用 handleClick 并填充 myDate1 和 myDate2。 我完全无法解释的是为什么 fromDate 没有它的当前值。在上述情况下，尽管状态变量的值发生了多次变化，但它始终具有 useState 提供的初始值而不是当前值。同时，如果单击 Test me 按钮，我会得到 fromDate...

的正确值

Answer 1

请查看这些答案：

根据您提供的代码，我建议将 fromDate 绑定到 useRef 容器：

const fromDateRef = useRef(null);

fromDateRef.current = fromDate;

在您引用 fromDate 的方法中，将其替换为 fromDateRef.current:

const test=()=>{
    return fromDateRef.current;
};

const handleClick = (params) => {
   let myDate1 = fromDateRef.current;
   let myDate2 = test();
}

Ag 网格阻止访问 React 状态变量的当前值

Ag grid prevents access to current value of React state variable

javascript

reactjs

ag-grid