从 Location.State 分配时反应状态值未定义

Question

我是获得 table 的父组件，当用户单击行时，它需要通过 history.push 将对象传递给子组件，一切正常。我在子组件中定义了一个相同类型的对象，并尝试分配通过位置传来的值。我可以清楚地看到对象中的值，但子组件状态 'Undefined' 不确定我从拼图中遗漏了什么？

对象定义

 export interface ISearchCriteriaForm{
   startTime: string,
   endTime: string,
   liveTime?: string,
   schedAction_Active: string,
   siteId?: number,
   scheduleId?: number
 }

父组件

 const selectedRow = (row: any) => { 

  eziStatusSearchCriteria.siteId = row.siteId;
  history.push({
    pathname: `${url}/${row.siteId}`,
    state: {searchCriteria: eziStatusSearchCriteria}
  });
 };

子组件

const MyChildComponent = () =>{
   const[eziSearchCriteria, setEziSearchCriteria] = useState<IEziStatusSearchCriteriaForm>();

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

   const setSearchCriteria =() =>{
  
    const s1: IEziStatusSearchCriteriaForm = location.state.searchCriteria;  // in debugger, I can see data in s1
     setEziSearchCriteria(s1);
     console.log("data ",eziSearchCriteria);  // this console undefined???? need help here        
    }

Answer 1

现在试试这个，

const MyChildComponent = () =>{
   const[eziSearchCriteria, setEziSearchCriteria] = useState<IEziStatusSearchCriteriaForm>();

  useEffect(() =>{
    setSearchCriteria();
  },[eziSearchCriteria]); // always give dependeny of the data that is chnaging, so that component re-render when this changes

   const setSearchCriteria =() =>{
  
    const s1: IEziStatusSearchCriteriaForm = location.state.searchCriteria;  // in debugger, I can see data in s1
     setEziSearchCriteria(s1);
     console.log("data ",eziSearchCriteria);  // this console undefined???? need help here        
    }

从 Location.State 分配时反应状态值未定义

React State Value Undefined When Assign From Location.State

reactjs

react-localization

对象定义

父组件

子组件