React: TypeError: Cannot read property 'newCases' of undefined

Question

我想了解为什么我收到 typeError Cannot read 属性 'newcases' of undefined。我构建了一个新组件 (Newcase.js) 并基于一个运行良好的现有组件。但是新组件总是return这个错误。

index.js发送get请求：

 export const fetchNewCases = async () => {
  try {
    const {
      updates: { newcases},
    } = await axios.get("/api/newcases");
    return { newcases};
  } catch (error) {
    return error;
  }
};

在App.js中调用函数：

state = {
    data: {},
    wilaya: "",
    updates: {},
  };


async componentDidMount() {
    const updates = await fetchNewCases();
    this.setState({ updates });
  }
    return (
          <Fragment>
            <div className="container">
              <NewCase updates={updates} />
           </div>
          </Fragment>
        );

这是 Newcase.js 组件：

const NewCase = ({ newcases}) => {
  return (
    <div className="modal-main">
      <section className="modal-main">New cases: {newcases}</section>
    </div>
  );
};

export default NewCase;

在服务器端，我return虚拟数据：

const updates = {
  newcases: { value: 200 },
};

app.get("/api/newcases", (req, res) => {
   res.json(updates);
});

Answer 1

基本上你的 server/mock 发送一个对象 newcases 作为属性而你试图解构属性 updates 这是不正确的。此外，axios 提供 data 内的结果。所以首先解构 data 然后对 newcases

这样做

export const fetchNewCases = async () => {
  try {
    const {data: {newcases} } = await axios.get("/api/newcases");
    return { newcases};
  } catch (error) {
    return error;
  }
};

在 app.js 中你在 app.js 中传递 updates <NewCase updates={updates} /> 而在 Newcase.js 中你接收的道具是 newcases 这是不正确的

这样做

 const NewCase = ({ updates}) => { ...

更新（基于评论）

在 app.js 你应该通过 this.state.updates （不仅仅是更新）

App.js

state = {
    data: {},
    wilaya: "",
    updates: {},
  };


async componentDidMount() {
    const updates = await fetchNewCases();
    this.setState({ updates });
  }
    return (
          <Fragment>
            <div className="container">
              <NewCase updates={this.state.updates} /> //<------ like this
           </div>
          </Fragment>
        );

React: TypeError: Cannot read property 'newCases' of undefined

React: TypeError: Cannot read property 'newCases' of undefined

undefined

express

reactjs