Javascript 在状态更改时未正确重新加载React组件

我正在使用react钩子，我有一个子组件

Addmember

和一个父组件

MemberList

。在成员列表中，用户单击AddMember，弹出一个模型（子组件），然后用户可以输入一些表单数据，然后提交表单。然后，表单将新成员添加到MongoDB集合中

.then（）

调用

parentCallback（true）

将

加载的父状态翻转为
true
，然后触发组件重新渲染。这是成功的工作

我无法理解的问题是，当父对象在数据库中点击
getMembers
时，它不会返回新添加的成员。如果我刷新页面，相同的调用将成功抓取所有成员，包括最近添加的成员

MemberList.js:

import React, { useState, useEffect } from "react";
import Spinner from "react-bootstrap/Spinner";
import { toast } from "react-toastify";

import { css } from "glamor";
import "react-toastify/dist/ReactToastify.css";
import "react-datepicker/dist/react-datepicker.css";
import "../Styles/ReactDatePicker.css";

import Member from "./Member";

import AddMemberModal from "../models/AddMember";
import RemoveMemberModel from "../models/RemoveMember";

const { getFamily, getMembers } = require("../Utils/Service");

const MemberList = () => {
  const [family, setFamily] = useState({});
  const [familyMembersList, setFamilyMembersList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (loading) {
      fetchData();
    }
  }, [loading]);

  async function fetchData() {
    getFamily.then(result => {
      console.log('get family');
      setFamily(result);
    });

    getMembers.then(result => {
      try {
        console.log('set family list');
        console.log(result);
        setFamilyMembersList(
          result.map((child, index) => (
            <Member
              key={index}
              index={child._id}
              balance={child.balance}
              firstName={child.firstName}
              lastName={child.lastName}
              birthday={child.birthday}
              role={child.role[0]}
            />
          ))
        );
      } catch (e) {
        toast.error("500: Error with Service Call", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          className: css({
            background: "#ed5565 !important"
          })
        });
      } finally {
        setLoading(false);
      }
    });
  }

  function handleCallback() {
    setLoading(true);
  }

  return (
    <div className="ibox">
      <div className="ibox-title">
        <h5>{family.name}</h5>
        <div className="ibox-tools">
          <span className="label label-warning-light float-right">
            {familyMembersList.length} Member(s)
          </span>
        </div>
      </div>
      <div className="ibox-content">
        <div className="feed-activity-list">
          {loading ? (
            <Spinner animation="grow" role="status" variant="dark">
              <span className="sr-only">Loading...</span>
            </Spinner>
          ) : (
            familyMembersList
          )}
        </div>
        <div className="d-flex">
          <a
            className="btn btn-primary text-white m-t"
            data-toggle="modal"
            data-target={"#newMemberModel"}
          >
            <i className="fa fa-plus"></i> New Member
          </a>
          <a
            className="btn btn-danger text-white m-t m-l"
            data-toggle="modal"
            data-target={"#removeMemberModel"}
          >
            <i className="fa fa-minus"></i> Remove Member
          </a>
        </div>
      </div>

      {/* Add Member Model */}
      <AddMemberModal parentCallback={handleCallback}/>

      {/* Remove Member Model */}
      <RemoveMemberModel />
    </div>
  );
};

export default MemberList;

返回的对象缺少最近添加的成员。我曾尝试添加超时，认为这可能是时间问题，但此问题没有改变。
您可以将提交的数据添加到数组中，而不是刷新页面

在
MemberList.js
文件中，将您的
handleCallback
更改为：

function handleCallback(data){
    const arr = [...familyMembersList];
    let newMember = (
      <Member
        key={data._id}
        index={data._id}
        balance={0}
        firstName={data.firstName}
        lastName={data.lastName}
        birthday={data.birthday}
        role={data.role}
      />
    )
    arr.push(newMember);
    console.log(arr);
    setFamilyMembersList(arr);
    setLoading(false);
  }

你好，查尔斯，介意我澄清一下吗？关于你的API@阿里下面的解决方案看起来不错，但上面的问题可能不像你上面所说的那样是一个反应问题（这只是我这边的一个假设）。您有访问API的权限吗？能否显示您的
postMember
和端点实现？可能是在数据实际添加到数据库之前返回的。
[Log] get family
[Log] set family list
[Log] [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] (10)

function handleCallback(data){
    const arr = [...familyMembersList];
    let newMember = (
      <Member
        key={data._id}
        index={data._id}
        balance={0}
        firstName={data.firstName}
        lastName={data.lastName}
        birthday={data.birthday}
        role={data.role}
      />
    )
    arr.push(newMember);
    console.log(arr);
    setFamilyMembersList(arr);
    setLoading(false);
  }

const onSubmit = (data) => {
    try {
        data.familyId = "5dddf14df965552b3da57be1";
        postMember(data).then(async () => parentCallback(data));
    } catch (error) {
    ...
    }
};