React：TypeError：无法读取未定义的属性“New Cases”

Question

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

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;

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

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

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

Answer 1

1. 基本上，您的服务器/mock发送了一个具有newcase属性的对象，而您试图对updates属性进行结构分解，这是不正确的。另外，axios在数据中提供结果。因此，首先destructuredata，然后对newcases
进行嵌套destructure

这样做

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

这样做

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

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>
        );