Reactjs 在React中，当我执行get call时，为什么数据不会自动进入，如果我刷新页面，那么只有数据进入？_Reactjs

Reactjs 在React中，当我执行get call时，为什么数据不会自动进入，如果我刷新页面，那么只有数据进入？

reactjs

Reactjs 在React中，当我执行get call时，为什么数据不会自动进入，如果我刷新页面，那么只有数据进入？,reactjs,Reactjs,我正在做一个React项目，在我的项目中，我有三个组件：主页、注册、列表。在主组件中没有任何内容，在注册组件中我有一个注册表，在列表组件中我从后端获取数据。现在我把列表组件放在注册组件中，现在，如果我在注册组件中注册，我必须在同一页面中查看注册用户的详细信息但数据并没有动态更新。对于更新数据，如果刷新页面，则仅更新数据。有人请帮助我如何克服这个问题 Api运行良好如果你觉得我不清楚我的疑问，请发表评论提前谢谢这是Signup.js import React, { useState,

我正在做一个React项目，在我的项目中，我有三个组件：主页、注册、列表。在主组件中没有任何内容，在注册组件中我有一个注册表，在列表组件中我从后端获取数据。现在我把列表组件放在注册组件中，现在，如果我在注册组件中注册，我必须在同一页面中查看注册用户的详细信息但数据并没有动态更新。对于更新数据，如果刷新页面，则仅更新数据。有人请帮助我如何克服这个问题

Api运行良好

如果你觉得我不清楚我的疑问，请发表评论

提前谢谢

这是Signup.js

import React, { useState, useRef } from 'react';
import './Signup.css';
import axios from 'axios';
import List from '../List/List';

function Signup() {

    const [data, sendData] = useState({})

    const postData = async () => {
        try {
            const result = await axios.post('http://localhost:5000/api/signup', data)
            sendData(result)
            console.log(result)
        } catch {

        }
    }

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
        postData()
    }

    const myForm = useRef(null)
    const resetForm = () => {

        myForm.current.reset();

        }

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='col-4'>
                        <form onSubmit={handleSubmit} ref={myForm}>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" name='firstname' onChange={handleChange} className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" name='lastname' onChange={handleChange} className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' onChange={handleChange} className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' onChange={handleChange} className="form-control" id="password"></input>
                            </div>
                            <button onClick={resetForm} type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <div className='col-12'>
                    <List></List>
                </div>
            </div>
        </div>
    )
}

export default Signup

import React, { useState, useRef } from 'react';
import './Signup.css';
import axios from 'axios';
import List from '../List/List';

function Signup() {

    const [data, sendData] = useState({})
    const [registered, setRegistered] = useState(false)

    const postData = async () => {
        try {
            const result = await axios.post('http://localhost:5000/api/signup', data)
            sendData(result)
            setRegistered(true)
            console.log(result)
        } catch {

        }
    }

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
        postData()
    }

    const myForm = useRef(null)
    const resetForm = () => {

        myForm.current.reset();

        }

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='col-4'>
                        <form onSubmit={handleSubmit} ref={myForm}>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" name='firstname' onChange={handleChange} className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" name='lastname' onChange={handleChange} className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' onChange={handleChange} className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' onChange={handleChange} className="form-control" id="password"></input>
                            </div>
                            <button onClick={resetForm} type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <div className='col-12'>
                    <List registered={registered}></List>
                </div>
            </div>
        </div>
    )
}

export default Signup

import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
import List from "./List";

function Signup() {
  const [data, sendData] = useState({});
  const [data1, iterateData] = useState([]);

  const getData = async () => {
    try {
      const result = await axios.get("http://localhost:5000/api/signup");
      iterateData(result.data);
      console.log(result.data);
    } catch (error) {
      console.log(error);
    }
  };

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

  const postData = async () => {
    try {
      const result = await axios.post("http://localhost:5000/api/signup", data);
      iterateData([...data1, result]);
    } catch {}
  };

  const handleChange = ({ target }) => {
    const { name, value } = target;
    const newData = Object.assign({}, data, { [name]: value });
    sendData(newData);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log(data);
    postData();
  };

  const myForm = useRef(null);
  const resetForm = () => {
    myForm.current.reset();
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="col-4">
            <form onSubmit={handleSubmit} ref={myForm}>
              <div className="form-group">
                <label htmlFor="firstname">Firstname</label>
                <input
                  type="text"
                  name="firstname"
                  onChange={handleChange}
                  className="form-control"
                  id="firstname"
                />
              </div>
              <div className="form-group">
                <label htmlFor="lastname">Lastname</label>
                <input
                  type="text"
                  name="lastname"
                  onChange={handleChange}
                  className="form-control"
                  id="lastname"
                />
              </div>
              <div className="form-group">
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  name="email"
                  onChange={handleChange}
                  className="form-control"
                  id="email"
                />
              </div>
              <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  name="password"
                  onChange={handleChange}
                  className="form-control"
                  id="password"
                />
              </div>
              <button
                onClick={resetForm}
                type="submit"
                className="btn btn-primary"
              >
                Submit
              </button>
            </form>
          </div>
        </div>
        <div className="col-12">
          <List data={data1} />
        </div>
      </div>
    </div>
  );
}

export default Signup;

import React，{useState，useRef}来自“React”；
导入“./Signup.css”；
从“axios”导入axios；
从“../List/List”导入列表；
函数注册（）{
const[data，sendData]=useState（{}）
const postData=async（）=>{
试一试{
const result=等待axios.post（'http://localhost:5000/api/signup",数据)
发送数据（结果）
console.log（结果）
}抓住{
}
}
常量handleChange=（{target}）=>{
常量{name，value}=target
const newData=Object.assign（{}，data，{[name]：value}）
sendData（新数据）
}
常量handleSubmit=（e）=>{
e、 预防默认值（）
console.log（数据）
postData（）
}
const myForm=useRef（空）
常量重置形式=（）=>{
myForm.current.reset（）；
}
返回(
名字
姓氏
电子邮件
密码
提交
)
}
导出默认注册

这是List.js

import React, { useState, useEffect } from 'react';
import './List.css';
import axios from 'axios';

function List() {
    const [data, iterateData] = useState([])

    const getData = async() => {
        try {
            const result = await axios.get('http://localhost:5000/api/signup')
            iterateData(result.data)
            console.log(result.data)
        } catch(error) {
            console.log(error)
        }
    }

    useEffect(() => {
        getData()
    }, [])

    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <table className='table table-bordered'>
                        <thead>
                            <tr>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Email</th>
                                <th>Password</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            {data.map(currentValue => 
                            <tr>
                                <td>{currentValue.firstname}</td>
                                <td>{currentValue.lastname}</td>
                                <td>{currentValue.email}</td>
                                <td>{currentValue.password}</td>
                                <td><button className='btn btn-danger'>Delete</button></td>
                            </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}

export default List

import React，{useState，useffect}来自“React”；
导入“/List.css”；
从“axios”导入axios；
函数列表（）{
const[data，iterateData]=useState（[]
const getData=async（）=>{
试一试{
const result=等待axios.get（'http://localhost:5000/api/signup')
迭代数据（result.data）
console.log（result.data）
}捕获（错误）{
console.log（错误）
}
}
useffect（（）=>{
getData（）
}, [])
返回(
名字
姓氏
电子邮件
密码
删除
{data.map（currentValue=>
{currentValue.firstname}
{currentValue.lastname}
{currentValue.email}
{currentValue.password}
删除
)}
)
}
导出默认列表

我认为您需要更改useEffect方法

试试这个：Signup.js

import React, { useState, useRef } from 'react';
import './Signup.css';
import axios from 'axios';
import List from '../List/List';

function Signup() {

    const [data, sendData] = useState({})

    const postData = async () => {
        try {
            const result = await axios.post('http://localhost:5000/api/signup', data)
            sendData(result)
            console.log(result)
        } catch {

        }
    }

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
        postData()
    }

    const myForm = useRef(null)
    const resetForm = () => {

        myForm.current.reset();

        }

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='col-4'>
                        <form onSubmit={handleSubmit} ref={myForm}>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" name='firstname' onChange={handleChange} className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" name='lastname' onChange={handleChange} className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' onChange={handleChange} className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' onChange={handleChange} className="form-control" id="password"></input>
                            </div>
                            <button onClick={resetForm} type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <div className='col-12'>
                    <List></List>
                </div>
            </div>
        </div>
    )
}

export default Signup

import React, { useState, useRef } from 'react';
import './Signup.css';
import axios from 'axios';
import List from '../List/List';

function Signup() {

    const [data, sendData] = useState({})
    const [registered, setRegistered] = useState(false)

    const postData = async () => {
        try {
            const result = await axios.post('http://localhost:5000/api/signup', data)
            sendData(result)
            setRegistered(true)
            console.log(result)
        } catch {

        }
    }

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
        postData()
    }

    const myForm = useRef(null)
    const resetForm = () => {

        myForm.current.reset();

        }

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='col-4'>
                        <form onSubmit={handleSubmit} ref={myForm}>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" name='firstname' onChange={handleChange} className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" name='lastname' onChange={handleChange} className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' onChange={handleChange} className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' onChange={handleChange} className="form-control" id="password"></input>
                            </div>
                            <button onClick={resetForm} type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <div className='col-12'>
                    <List registered={registered}></List>
                </div>
            </div>
        </div>
    )
}

export default Signup

import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
import List from "./List";

function Signup() {
  const [data, sendData] = useState({});
  const [data1, iterateData] = useState([]);

  const getData = async () => {
    try {
      const result = await axios.get("http://localhost:5000/api/signup");
      iterateData(result.data);
      console.log(result.data);
    } catch (error) {
      console.log(error);
    }
  };

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

  const postData = async () => {
    try {
      const result = await axios.post("http://localhost:5000/api/signup", data);
      iterateData([...data1, result]);
    } catch {}
  };

  const handleChange = ({ target }) => {
    const { name, value } = target;
    const newData = Object.assign({}, data, { [name]: value });
    sendData(newData);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log(data);
    postData();
  };

  const myForm = useRef(null);
  const resetForm = () => {
    myForm.current.reset();
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="col-4">
            <form onSubmit={handleSubmit} ref={myForm}>
              <div className="form-group">
                <label htmlFor="firstname">Firstname</label>
                <input
                  type="text"
                  name="firstname"
                  onChange={handleChange}
                  className="form-control"
                  id="firstname"
                />
              </div>
              <div className="form-group">
                <label htmlFor="lastname">Lastname</label>
                <input
                  type="text"
                  name="lastname"
                  onChange={handleChange}
                  className="form-control"
                  id="lastname"
                />
              </div>
              <div className="form-group">
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  name="email"
                  onChange={handleChange}
                  className="form-control"
                  id="email"
                />
              </div>
              <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  name="password"
                  onChange={handleChange}
                  className="form-control"
                  id="password"
                />
              </div>
              <button
                onClick={resetForm}
                type="submit"
                className="btn btn-primary"
              >
                Submit
              </button>
            </form>
          </div>
        </div>
        <div className="col-12">
          <List data={data1} />
        </div>
      </div>
    </div>
  );
}

export default Signup;

import React，{useState，useRef}来自“React”；
导入“./Signup.css”；
从“axios”导入axios；
从“../List/List”导入列表；
函数注册（）{
const[data，sendData]=useState（{}）
const[registered，setRegistered]=useState（false）
const postData=async（）=>{
试一试{
const result=等待axios.post（'http://localhost:5000/api/signup",数据)
发送数据（结果）
setRegistered（真）
console.log（结果）
}抓住{
}
}
常量handleChange=（{target}）=>{
常量{name，value}=target
const newData=Object.assign（{}，data，{[name]：value}）
sendData（新数据）
}
常量handleSubmit=（e）=>{
e、 预防默认值（）
console.log（数据）
postData（）
}
const myForm=useRef（空）
常量重置形式=（）=>{
myForm.current.reset（）；
}
返回(
名字
姓氏
电子邮件
密码
提交
)
}
导出默认注册

List.js

function List(props) {
    const registered = props.registered
    const [data, iterateData] = useState([])

    const getData = async() => {
        try {
            const result = await axios.get('http://localhost:5000/api/signup')
            iterateData(result.data)
            console.log(result.data)
        } catch(error) {
            console.log(error)
        }
    }

    useEffect(() => {
        getData()
    }, [registered])

    return(
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <table className='table table-bordered'>
                        <thead>
                            <tr>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Email</th>
                                <th>Password</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            {data.map(currentValue => 
                            <tr>
                                <td>{currentValue.firstname}</td>
                                <td>{currentValue.lastname}</td>
                                <td>{currentValue.email}</td>
                                <td>{currentValue.password}</td>
                                <td><button className='btn btn-danger'>Delete</button></td>
                            </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}

export default List

import React from "react";

function List({ data }) {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Password</th>
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
              {data.map(currentValue => (
                <tr>
                  <td>{currentValue.firstname}</td>
                  <td>{currentValue.lastname}</td>
                  <td>{currentValue.email}</td>
                  <td>{currentValue.password}</td>
                  <td>
                    <button className="btn btn-danger">Delete</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default List;

功能列表（道具）{
const registed=props.registed
const[data，iterateData]=useState（[]
const getData=async（）=>{
试一试{
const result=等待axios.get（'http://localhost:5000/a