Javascript 使用React更新显示值

我有一个表单，它正在向云数据库发送数据。第一次加载页面时，呈现数据库中的数据，但使用表单更新此数据时，不会更改。我不知道如何再次渲染它。我认为这是在使用useffect

下面是一些代码：

const user = useContext(UserContext);
const { userName, position, phoneUser } = user;
 
const initialStateValues = {
    userName: "",
    phoneUser: "",
    position: "",
  };

const [values, setValues] = useState(initialStateValues);

 const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value }); 

  };
        
const handleSubmit = e => {
     e.preventDefault();
     setValues({ ...initialStateValues });
    const usuario = firestore.collection('users').doc(user.uid);
    usuario.set(
      {
        userName: values.userName,
        phoneUser: values.phoneUser,
        position: values.position,
      },
      { merge: true }
    );

  };

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

这里的渲染部分：

      <p>
           <b>Contact Name:</b>
             {userName}
      </p>
                                
      <p>
           <b>Phone:</b>
              {phoneUser}
      </p>     

      <p>
          <b>Posición:</b>
             {position}
      </p>    

联系人姓名：
{userName}


电话：
{phoneUser}


波西翁：
{position}

这是因为您正在从

用户

对象渲染值。但是在表单更改期间，您正在更新状态值。您可以做的是使用用户对象初始化状态。然后显示来自状态的数据

const user = useContext(UserContext);
const { userName, position, phoneUser } = user;
 
// Updated the initialStateValues with values from the user.
const initialStateValues = {
    userName,
    phoneUser,
    position,
  };

const [values, setValues] = useState(initialStateValues);

 const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value }); 

  };
        
const handleSubmit = e => {
     e.preventDefault();
     setValues({ ...initialStateValues });
    const usuario = firestore.collection('users').doc(user.uid);
    usuario.set(
      {
        userName: values.userName,
        phoneUser: values.phoneUser,
        position: values.position,
      },
      { merge: true }
    );

  };

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

在渲染部分

      <p>
         <b>Contact Name:</b>
         {values.userName}
      </p>
                                
      <p>
           <b>Phone:</b>
              {values.phoneUser}
      </p>     

      <p>
          <b>Posición:</b>
             {values.position}
      </p>    

联系人姓名：
{values.userName}


电话：
{values.phoneUser}


波西翁：
{values.position}

谢谢！我还必须添加const{name，value}=e.target；setValues（{…values，[名称]：value}）；论手推