reactjs - Reactjs：提交表单后未显示对象

Question

我正在制作一个对象列表和一个创建对象的表单。但是当我提交表单时，它没有显示新对象。我必须按 f5 重新加载页面。我如何解决这个问题。

我isSumitted在 index.js 中创建了一个状态，以便在我提交表单时重新呈现。但这不是我做错的

资源表单.js

const ResourceForm = (props) => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [permission, setPermission] = useState('');
    const [jobtitle, setJobtitle] = useState('');
    const [avatar, setAvatar] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async () => {
        const resourceObject = {
            permission: permission,
            jobtitle: jobtitle,
            name: {
                first: firstName,
                last: lastName
            },
            email: email
        };
        await addResource(resourceObject);
        props.setOnSubmitted(true);
        props.onClose();
    };



    const handleChangeFirstName = (event)=> {
        const {value} = event.target;
        setFirstName(value);
    };
    const handleChangeLastName = (event)=> {
        const {value} = event.target;
       setLastName(value);
    };

    const handleChangeEmail= (event)=> {
        const {value} = event.target;
        setEmail(value);
    };

    const handleChangeJobtitle= (event)=> {
        const {value} = event.target;
        setJobtitle(value);
    };
    const handleChangePermission = (event)=> {
        const {value} = event.target;
        setPermission(value);
    };



    if(!props.show) return null;
    return (
        <Container>
            <HeaderForm>
                <HeaderTitle>
                    New Resource
                </HeaderTitle>
            </HeaderForm>
            <BodyForm>
                {row('First Name', 'firstName', firstName, handleChangeFirstName)}
                {row('Last Name', 'lastName', lastName, handleChangeLastName)}
                {row('Email', 'email', email, handleChangeEmail)}
                {row('Permission', 'permission', permission, handleChangePermission)}
                {row('Job Title', 'jobtitle', jobtitle, handleChangeJobtitle)}
            </BodyForm>

            <FooterForm>
                <AddFormButton onClick={handleSubmit} >
                    <AddFormButtonSpan>
                        Add Resource
                    </AddFormButtonSpan>
                </AddFormButton>
                <CancelFormButton onClick={props.onClose}>
                    <CancelFormButtonSpan>
                        Cancel
                    </CancelFormButtonSpan>
                </CancelFormButton>
            </FooterForm>
        </Container>
    )
};

index.js

function Resource() {
  const resourceContext = useContext(ResourceContext);
  const { persons } = resourceContext;
  const [isOpen, setIsOpen] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };


  return (
      <ResourceContainer>
        <ResourceForm setOnSubmitted={setIsSubmitted} onClose={toggleModal}  show={isOpen}/>
        <ResourceHeader>
          <h1>List Resources</h1>
          <AddButton onClick={toggleModal}>
            <AddButtonIcon src={addIcon}/>
            <AddButtonSpan>
              Add New Resource
            </AddButtonSpan>
          </AddButton>
        </ResourceHeader>
        {GridResource(persons)} // this code display list of resources
      </ResourceContainer>

  );
}

资源上下文

const ResourceProvider = props => {
  const [isLoading, setIsLoading] = useState(false);
  const [persons, setPersons] = useState([]);
  const [search, setSearch] = useState('');
  const [searchResult, setSearchResult] = useState([]);

  const fetchResource = async () => {
    setIsLoading(true);
    const res = await getResource();
    const result = res.data.resources;
    const personsFilter = result.map(resource => {
      const person = {
        _id: resource._id,
        name: `${resource.name.first} ${resource.name.last}`,
        firstName: resource.name.first,
        lastName: resource.name.last,
        permission: resource.permission,
        email: resource.email,
        jobtitle: resource.jobtitle,
        avatar: resource.avatar,
      };
      return person;
    });
    setPersons(personsFilter);
    setSearchResult(personsFilter);
    setIsLoading(false);
  };

  const updateSearch = event => {
    setSearch(event.target.value.toLowerCase());
  };

  useEffect(() => {
    fetchResource();
  }, []);

  useEffect(() => {
    const filteredResults = persons.filter(
      item => item.name.toLowerCase().indexOf(search) !== -1,
    );
    setSearchResult(filteredResults);
  }, [search, persons]);
  return (
    <ResourceContext.Provider
      value={{
        persons,
        searchResult,
        search,
        updateSearch,
        isLoading,
        fetchResource,
      }}
    >
      {props.children}
    </ResourceContext.Provider>
  );
};

export { ResourceProvider, ResourceContext };

标签： reactjs