React渲染前数据获取位置及Redux异步数据未生效问题咨询

咱们一步步拆解你遇到的问题，然后给出对应的解决办法：

1. 核心问题：异步操作的时机与状态更新的异步性 #

你的代码里有两个关键问题：

• componentWillMount已废弃且不适合异步操作：这个生命周期钩子从React 16.3开始就被官方标记为废弃，而且它的执行时机是组件挂载前，异步请求还没完成你就立刻去取this.props.auth，此时Redux store还没更新，自然拿到的是undefined。
• Redux状态更新是异步的：fetchUser是异步action（依赖redux-thunk），调用它后dispatch更新store的动作不会立刻完成，组件的props不会同步更新，所以你在调用fetch后马上执行setState肯定拿不到最新数据。

正确的实现方式 #

第一步：用componentDidMount发起数据请求 #

这是React官方推荐的异步数据获取时机，组件挂载完成后发起请求，不会阻塞渲染流程。

第二步：直接通过Redux映射props，无需组件内部维护state #

既然用了Redux，完全可以把store里的auth状态直接映射到组件props，直接在render里使用，避免组件state和Redux store的状态不同步问题。

修正后的代码示例 #

组件代码：

class YourComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载完成后发起请求
    this.props.fetchUser();
  }

  render() {
    // 直接使用映射到props的auth状态，同时处理加载中的情况
    const { auth } = this.props;
    
    if (!auth) {
      return <div>加载中...</div>;
    }

    return (
      <div>
        {/* 这里渲染你的用户数据 */}
        <p>用户名：{auth.username}</p>
      </div>
    );
  }
}

// 将Redux store中的auth状态映射到组件props
const mapStateToProps = (state) => ({
  auth: state.auth // 这里要对应你的store结构，比如state下的auth字段
});

// 将fetchUser action映射到组件props
export default connect(mapStateToProps, { fetchUser })(YourComponent);

Action代码（你的原有代码无需修改）：

export const fetchUser = () => async dispatch => {
  const res = await axios.get('/api/current_user');
  dispatch({ type: FETCH_USER, payload: res.data });
};

关于LocalStorage有数据但组件拿不到的补充 #

如果刷新页面后，LocalStorage里有之前存的用户数据，但组件初始时还是undefined，那是因为Redux store的初始状态是空的，没有和LocalStorage同步。你需要在创建store时，从LocalStorage读取数据作为初始状态：

// 创建store的文件中
const initialState = {
  auth: JSON.parse(localStorage.getItem('auth')) || null
};

const store = createStore(
  rootReducer,
  initialState,
  // 这里添加你的中间件，比如redux-thunk等
);

内容的提问来源于stack exchange，提问作者Dave_888