从Location.State分配时反应状态值未定义[重复]答案

【问题标题】：React State Value Undefined When Assign From Location.State [duplicate]从Location.State分配时反应状态值未定义[重复]
【发布时间】：2021-01-03 09:00:19
【问题描述】：

我是获得表格的父组件，当用户单击行时，它需要通过 history.push 将对象传递给子组件，这一切都很好。我在子组件中定义了一个相同类型的对象，并尝试分配来自位置的值。我可以清楚地看到对象中的值，但子组件状态为“未定义”，不确定我在拼图中缺少什么？

对象定义

 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        
    }

【问题讨论】：

你能尝试通过useEffect实现你的状态吗，我认为状态不会立即设置所以测试这个-> useEffect(() => { console.log("data ",eziSearchCriteria); } , [eziSearchCriteria]);
React 状态更新是异步处理的，并且在 下一次渲染 上可用，因此控制台日志状态在更新入队之后只会记录当前渲染周期的当前状态。在您的情况下，初始状态未定义。

标签： reactjs react-localization

【解决方案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        
    }

【讨论】：