无法读取未定义的属性“screamId”（react-redux）答案

【问题标题】：Cannot read property 'screamId' of undefined(react-redux)无法读取未定义的属性“screamId”（react-redux）
【发布时间】：2021-07-19 17:43:41
【问题描述】：

我目前正在开发一个社交应用程序。我已经尝试了很多不同的方法来传递 params(screamId) ，但由于某种原因它似乎仍然是未定义的。任何帮助表示赞赏...代码如下

主页显示所有尖叫声都已创建。

通过调用 getScreamsAction 函数上的动作来获取所有尖叫声。

在 Scream 组件上，用它的screamId 一张一张地显示尖叫卡。

Home.js

const Home = ({ getScreamsAction, data: { screams, loading } }) => {
  useEffect(() => {
    getScreamsAction();
  }, [getScreamsAction]);

  const scream = screams.map((scream) => (
    <Scream key={scream.screamId} screams={scream} />
  ));

  const recentScream = !loading ? scream : <ScreamSkeleton />;

  return (
    <Grid container spacing={16}>
      <Grid item sm={8} xs={12}>
        {recentScream}
      </Grid>
      <Grid item sm={4} xs={12}>
        <Profile />
      </Grid>
    </Grid>
  );
};

Home.propTypes = {
  getScreamsAction: PropTypes.func.isRequired,
  data: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  data: state.data,
});

const mapDispatchToProps = { getScreamsAction };

export default connect(mapStateToProps, mapDispatchToProps)(Home);

动作还原

在 SET_SCREAMS 上获取派发动作的尖叫数据

const getScreamsAction = () => (dispatch) => {
  dispatch({ type: LOADING_DATA });

  axios
    .get("/screams")
    .then((res) => {
      dispatch({
        type: SET_SCREAMS,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch({
        type: SET_SCREAMS,
        payload: [],
      });
    });
};

redux 上的减速器

const dataReducers = (state = initialState, action) => {
  switch (action.type) {
    case LOADING_DATA:
      return {
        ...state,
        loading: true,
      };
    case SET_SCREAMS:
      return {
        ...state,
        screams: action.payload,
        loading: false,
      };
    default:
      return state;
    };
}

我发现这种方法的困难：

我什么都试过了。任何帮助将不胜感激！

【问题讨论】：

标签： javascript firebase react-redux

【解决方案1】：

这意味着你在某处要求 SOMETHING.screamId

在您显示的代码中，发生这种情况的唯一位置是scream.screamId。因此，我建议您的下一个调试步骤是在此之前显示尖叫声。例如：

const Home = ({ getScreamsAction, data: { screams, loading } }) => {
  useEffect(() => {
    getScreamsAction();
  }, [getScreamsAction]);

  console.log("screams: ", JSON.stringify(screams, null, 2))

  const scream = screams.map((scream) => (
    <Scream key={scream.screamId} screams={scream} />
  ));

如果您确定 TypeError 中引用的确切编号行并显示该代码行，这将有所帮助，因为错误可能不是来自上面的代码 - 它只是我们看到一个screamId 属性的唯一地方访问，在您提供的代码中。

【讨论】：