React redux 状态未使用 React-Router 库渲染

Question

我正在创建一个调查问卷表单，其中包含可重用的 React 组件，用于页面布局，状态来自我的 Redux 商店。我的状态已更新，但更新后的状态未在页面上正确呈现。具体来说，在审查路线上，我的

item.value

不见了。如何获取要渲染的值？

App.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { Route, useHistory } from 'react-router-dom';

function App() {
  const history = useHistory();
  const dispatch = useDispatch();
  const feedbackSchema = useSelector((store) => store.feedbackSchema);
  const [inputValue, setInputValue] = useState('');

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

  const fetchFeedback = () => {
    axios({
      method: 'GET',
      url: 'api/feedback',
    })
      .then((response) => {
        dispatch({
          type: 'SET_FEEDBACK',
          payload: response.data,
        });
      })
      .catch((error) => {
        console.log('You had a axios GET error', error);
      });
  };

  const handleSubmit = (item, index) => {
    console.log(item, inputValue);
    dispatch({
      type: 'SET_VALUE',
      payload: [item, inputValue],
    });
    history.push(
      feedbackSchema[index + 1]?.route
        ? `/${feedbackSchema[index + 1]?.route}`
        : '/review'
    );
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Feedback!</h1>
        <h4>Don't forget it!</h4>
      </header>
      {feedbackSchema.map((item, index) => {
        return (
          <div key={item.key} className="feedback-container">
            <Route exact path={`/${item.route}`}>
              <h1>{item.header}</h1>
              <form>
                <div className="feedback-input">
                  <p className="feedback-topic">{item.topic}</p>
                  <input
                    type="text"
                    value={inputValue}
                    onChange={(event) => setInputValue(event.target.value)}
                  />
                  <br />
                  <button
                    type="button"
                    onClick={() => handleSubmit(item.key, index)}
                  >
                    Next
                  </button>
                </div>
              </form>
            </Route>
          </div>
        );
      })}
      <Route exact path={`/review`}>
        <h1>Review Your Feedback</h1>
        {feedbackSchema.map((feedback) => {
          return (
            <p key={feedback.key}>
              {JSON.stringify(feedback)}
              {feedback.key}: {feedback.value}
            </p>
          );
        })}
      </Route>
    </div>
  );
}

export default App;

Store.js

import { applyMiddleware, combineReducers, createStore } from "redux";
import logger from "redux-logger";

const feedbackList = (state = [], action) => {
    if (action.type === 'SET_FEEDBACK') {
        return action.payload;
    }
    return state;
}

const feedbackSchema = (state = [
    { key: "feeling", route: "", header: "How are you feeling today?", topic: "Feeling?", value: "" },
    { key: "understanding", route: "understanding", header: "How well are you understanding the content?", topic: "Understanding?", value: "" },
    { key: "support", route: "support", header: "How well are you being supported?", topic: "Support?", value: "" },
    { key: "comments", route: "comments", header: "Any comments you want to leave?", topic: "Comments", value: "" }

], action) => {
    if (action.type === 'SET_VALUE') {
        state.map((feedback) => {
            if (feedback.key === action.payload[0]) {
                feedback.value = action.payload[1]
            }
            return feedback;
        })
    }
    return state;
}

const store = createStore(
    combineReducers({
        feedbackList,
        feedbackSchema,
    }),
    applyMiddleware(logger)
)

export default store;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './components/App/App';
import { Provider } from 'react-redux';
import { HashRouter as Router } from 'react-router-dom';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>
);

Answer 1

状态已更新，但 UI 未更新，因为

react-redux

通过比较数据的地址来检查数据是否更改。

在您的

Store.js

文件中

const feedbackSchema = (state = [], action) => {
    if (action.type === 'SET_VALUE') {
        state.map((feedback) => {
            if (feedback.key === action.payload[0]) {
                feedback.value = action.payload[1]
            }
            return feedback;
        })
    }
    return state;
}

您通过更新状态返回相同的数据。因此，reducer 会比较状态地址是否等于状态地址。这使它认为没有进行任何更改。

相反，你可以这样做，

const feedbackSchema = (state = [], action) => {
    if (action.type === 'SET_VALUE') {
       const temp = state.map((feedback) => {
            if (feedback.key === action.payload[0]) {
                feedback.value = action.payload[1]
            }
            return feedback;
        })
    }
    return temp;
}

通过返回一个新变量

temp

reducer将了解所做的更改并更新UI。