Я создаю форму опроса с повторно используемыми компонентами React для макета страницы с состоянием, поступающим из моего магазина Redux. Мое состояние обновилось, но обновленное состояние не отображается на странице должным образом. Конкретно на маршруте обзора мои item.value отсутствуют. Как я могу получить значения для рендеринга?

Приложение.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.info('You had a axios GET error', error);
      });
  };

  const handleSubmit = (item, index) => {
    console.info(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;

Магазин.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>
);