React开发：如何从Props解构setToken函数存储登录令牌？

核心结论 #

不需要在SignUpForm组件内重新定义useState来管理token。你已经在父组件App.jsx中提升了token状态，并通过props传递了setToken，子组件只需接收并调用这个方法更新父组件的token即可，这是React状态提升的标准用法。

解构setToken的两种正确方式 #

方式1：组件参数直接解构（推荐） #

定义SignUpForm组件时，直接在参数中解构setToken，代码更简洁：

// SignUpForm.jsx
import { useState } from 'react';

function SignUpForm({ setToken }) {
  // 此处可直接使用setToken
}

export default SignUpForm;

方式2：组件内部解构props #

如果组件参数是完整的props对象，也可以在组件内部解构出setToken：

// SignUpForm.jsx
import { useState } from 'react';

function SignUpForm(props) {
  const { setToken } = props;
  // 后续直接使用setToken
}

export default SignUpForm;

完整示例：提交表单后更新token #

以下是注册组件的完整实现，包含表单处理、API请求及调用setToken更新父组件状态的逻辑：

// SignUpForm.jsx
import { useState } from 'react';

function SignUpForm({ setToken }) {
  // 子组件仅管理自身表单输入状态
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const response = await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });

      const data = await response.json();
      // 拿到API返回的令牌后，调用父组件传递的setToken更新状态
      if (data.token) {
        setToken(data.token);
      }
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
      </div>
      <div>
        <label>密码:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      <button type="submit">注册</button>
    </form>
  );
}

export default SignUpForm;

补充说明 #

• 子组件SignUpForm只需管理自身的表单输入状态（用户名、密码），token状态由父组件App统一管理，便于其他组件共享token状态。
• 调用setToken(data.token)会触发App组件重渲染，更新token值，实现状态的跨组件同步。

内容的提问来源于stack exchange，提问作者antjuh