Я создаю форму опроса с повторно используемыми компонентами 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>
);
🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.
Состояние обновляется, но пользовательский интерфейс не обновляется, поскольку 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;
}
Вы возвращаете те же данные, обновляя состояние. Следовательно, редуктор сравнивает, равен ли адрес состояния адресу состояния. Это заставляет его думать, что никаких изменений не произошло.
Вместо этого вы можете сделать это,
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, редуктор поймет, что изменения внесены, и пользовательский интерфейс будет обновлен.
Вы изменяете состояние и не возвращаете новые ссылки на состояние.
const feedbackSchema = (state = [....], action) => {
if (action.type === 'SET_VALUE') {
state.map((feedback) => {
if (feedback.key === action.payload[0]) {
feedback.value = action.payload[1] // <-- mutation!!!
}
return feedback;
})
}
return state; // <-- same reference as previous state
}
React работает, используя поверхностные проверки на равенство ссылок, и если state — это та же ссылка, что и в предыдущем цикле рендеринга, React не обязательно запускает повторный рендеринг компонента.
Чтобы правильно решить эту проблему, все обновляемые состояния и вложенные состояния обязательно должны быть ссылкой на новый объект.
Предлагаю переписать следующее:
const feedbackSchema = (state = [....], action) => {
if (action.type === 'SET_VALUE') {
return state.map((feedback) => { // <-- array.map creates new array reference
if (feedback.key === action.payload[0]) {
// Updating this feedback, create new object reference
return {
...feedback,
value: action.payload[1],
};
}
// Not updating feedback, return current feedback reference
return feedback;
})
}
// Just return current state
return state;
}
Однако более традиционно использовать операторы switch в функциях редуктора, поэтому их также можно переписать в более стандартном шаблоне/форме:
const feedbackSchema = (state = [....], action) => {
const { type, payload } = action;
switch(type) {
case 'SET_VALUE':
const [key, value] = payload;
return state.map((feedback) => feedback.key === key
? { ...feedback, value }
: feedback
);
default:
return state;
}
}