React-Redux存储店铺名及跨组件获取问题求助

一、修复Sksignup组件的渲染错误 #

你的组件无法渲染核心原因是语法错误和状态逻辑缺失，以下是修正后的完整代码：

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { namesactions } from '../store/display';

function Sksignup() {
  // 定义店铺名本地状态，绑定输入框
  const [shopname, setShopname] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate(); // 初始化导航钩子

  // 更新Redux Store的方法
  const updateShopNameInRedux = () => {
    dispatch(namesactions.updatename({ shopname }));
  };

  const insertdata = () => {
    axios.post('http://localhost:3001/register', { shopname })
      .then(() => {
        // 注册成功后更新Redux再跳转
        updateShopNameInRedux();
        navigate('/userentry');
      })
      .catch(err => console.error('注册失败:', err)); // 增加错误捕获
  };

  // 输入框变化时更新本地状态
  const handleInputChange = (e) => {
    setShopname(e.target.value);
  };

  // JSX必须被return包裹，符合React组件语法要求
  return (
    <div>
      <label>enter your shop name:</label>
      <input 
        type="text" 
        name="shopname" 
        value={shopname} // 绑定受控组件的value，确保输入同步
        onChange={handleInputChange} 
      />
      <button onClick={insertdata}>register</button>
    </div>
  );
}

export default Sksignup;

核心修复点：

• 新增useState定义shopname本地状态，绑定输入框的value和onChange事件，确保输入内容正常同步
• 修正useNavigate的初始化调用，之前未执行该钩子
• 修复axios的then回调逻辑，用箭头函数包裹navigate避免立即执行，同时增加错误捕获
• 将JSX代码用return包裹，解决语法错误
• 调整Redux更新时机：注册成功后再更新Store，保证数据准确性

二、在其他组件中获取并显示店铺名 #

在需要展示店铺名的组件中，使用useSelector钩子从Redux Store读取数据：

import React from 'react';
import { useSelector } from 'react-redux';

function WelcomeComponent() {
  // 根据store/index.js中定义的reducer键`name`，读取店铺名
  const shopname = useSelector(state => state.name.shopname);

  return (
    <div>
      <h1>Welcome, {shopname.trim() || 'Guest'}</h1>
    </div>
  );
}

export default WelcomeComponent;

说明：

• useSelector接收回调函数，参数为整个Redux状态树，通过state.name.shopname获取目标数据
• 增加trim()处理空字符串，避免显示空格；若店铺名为空，显示"Guest"作为兜底

三、是否需要使用Firebase？ #

不需要。你的需求是在应用内存储并共享店铺名，Redux已经可以满足内存中的状态管理需求。

如果需要持久化存储（比如页面刷新后仍保留店铺名），可以选择以下方案：

1. 使用redux-persist库，将Redux状态持久化到本地存储（localStorage/sessionStorage）
2. 若你已使用Firebase作为后端，也可将店铺名存储到Firebase实时数据库或Firestore中再同步到Redux，但这属于额外的后端存储需求，不是必须的。

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