当ReactJs React Redux中只创建或更新了一个项目列表时，如何停止重新呈现整个项目列表

Question

我正在制作这个web应用程序，它有一些帖子，用户可以在其中回答这些帖子。我已经使用React Redux来管理应用程序的状态。每次我创建或更新特定帖子的答案时，属于该帖子的整个答案列表都会被重新呈现，我想停止它，只呈现新创建或更新的答案。我用完全相同的方式发表评论，效果很好。评论不会被重新呈现，但答案会被重新呈现。我就是搞不清楚这里出了什么问题。请参阅下面的代码。

我也尝试过使用React.memo()，但它也不起作用！

应答渲染组件，

export function Answer() {
const classes = useStyles();
const dispatch = useDispatch();
const { postId } = useParams();
const postAnswers = useSelector(state => state.Answers);
const [answers, setAnswers] = React.useState(postAnswers.answers);
React.useEffect(() => {
if(postAnswers.status === 'idle') dispatch(fetchAnswers(postId));
}, [dispatch]);
React.useEffect(() => {
if(postAnswers.answers) handleAnswers(postAnswers.answers);
}, [postAnswers]);
const handleAnswers = (answers) => {
setAnswers(answers);
};
const AnswersList = answers ? answers.map(item => {
const displayContent = item.answerContent;
return(
<Grid item key={item.id}> 
<Grid container direction="column">
<Grid item>
<Paper component="form" className={classes.root} elevation={0} variant="outlined" >
<div className={classes.input}>
<Typography>{displayContent}</Typography>
</div>
</Paper>
</Grid>
</Grid>
</Grid>
);
}): undefined;
return(
<Grid container direction="column" spacing={2}>
<Grid item>
<Divider/>
</Grid>
<Grid item> 
<Grid container direction="column" alignItems="flex-start" justify="center" spacing={2}>
{AnswersList}
</Grid>
</Grid>
<Grid item>
<Divider/>
</Grid>
</Grid>
);
}

获取答案重复应用，

export const fetchAnswers = (postId) => (dispatch) => {
dispatch(answersLoading());
axios.get(baseUrl + `/answer_api/?postBelong=${postId}`)
.then(answers => 
dispatch(addAnswers(answers.data))
)
.catch(error => {
console.log(error);
dispatch(answersFailed(error));
});
}

张贴答案，

export const postAnswer = (data) => (dispatch) => {
axios.post(baseUrl + `/answer_api/answer/create/`,
data
)
.then(response => {
console.log(response);
dispatch(fetchAnswers(postBelong)); //This is the way that I update answers state every time a new answer is created or updated
})
.catch(error => {
console.log(error);
});
}

任何帮助都会很棒。非常感谢。

Answer 1

添加项目后，您可以从api中获取所有项目，以便在该状态下重新创建所有项目。如果你给一个容器组件项目的id，并让选择器将项目作为JSON获取，然后解析回对象，你可以将其存储起来并防止重新渲染，但我认为最好只是重新渲染。

以下是项目的记忆JSON示例：

const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { createSelector } = Reselect;
const fakeApi = (() => {
const id = ((num) => () => ++num)(1);
const items = [{ id: 1 }];
const addItem = () =>
Promise.resolve().then(() =>
items.push({
id: id(),
})
);
const updateFirst = () =>
Promise.resolve().then(() => {
items[0] = { ...items[0], updated: id() };
});
const getItems = () =>
//this is what getting all the items from api
//  would do, it re creates all the items
Promise.resolve(JSON.parse(JSON.stringify(items)));
return {
addItem,
getItems,
updateFirst,
};
})();
const initialState = {
items: [],
};
//action types
const GET_ITEMS_SUCCESS = 'GET_ITEMS_SUCCESS';
//action creators
const getItemsSuccess = (items) => ({
type: GET_ITEMS_SUCCESS,
payload: items,
});
const getItems = () => (dispatch) =>
fakeApi
.getItems()
.then((items) => dispatch(getItemsSuccess(items)));
const update = () => (dispatch) =>
fakeApi.updateFirst().then(() => getItems()(dispatch));
const addItem = () => (dispatch) =>
fakeApi.addItem().then(() => getItems()(dispatch));
const reducer = (state, { type, payload }) => {
if (type === GET_ITEMS_SUCCESS) {
return { ...state, items: payload };
}
return state;
};
//selectors
const selectItems = (state) => state.items;
const selectItemById = createSelector(
[selectItems, (_, id) => id],
(items, id) => items.find((item) => item.id === id)
);
const createSelectItemAsJSON = (id) =>
createSelector(
[(state) => selectItemById(state, id)],
//return the item as primitive (string)
(item) => JSON.stringify(item)
);
const createSelectItemById = (id) =>
createSelector(
[createSelectItemAsJSON(id)],
//return the json item as object
(item) => JSON.parse(item)
);
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
({ dispatch, getState }) => (next) => (action) =>
//simple thunk implementation
typeof action === 'function'
? action(dispatch, getState)
: next(action)
)
)
);
const Item = React.memo(function Item({ item }) {
const rendered = React.useRef(0);
rendered.current++;
return (
<li>
rendered:{rendered.current} times, item:{' '}
{JSON.stringify(item)}
</li>
);
});
const ItemContainer = ({ id }) => {
const selectItem = React.useMemo(
() => createSelectItemById(id),
[id]
);
const item = useSelector(selectItem);
return <Item item={item} />;
};
const ItemList = () => {
const items = useSelector(selectItems);
return (
<ul>
{items.map(({ id }) => (
<ItemContainer key={id} id={id} />
))}
</ul>
);
};
const App = () => {
const dispatch = useDispatch();
React.useEffect(() => dispatch(getItems()), [dispatch]);
return (
<div>
<button onClick={() => dispatch(addItem())}>
add item
</button>
<button onClick={() => dispatch(update())}>
update first item
</button>
<ItemList />
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<div id="root"></div>

Answer 2

我刚刚发现了导致上述问题的问题所在。在我的状态管理系统中，有一个名为answers的操作来处理帖子回答的状态，如下所示。

import * as ActionTypes from '../ActionTypes';
export const Answers = (state = {
status: 'idle',
errMess: null,
answers: []
}, action) => {
switch(action.type) {
case ActionTypes.ADD_ANSWER_LIST:
return {...state, status: 'succeeded', errMess: null, answers: action.payload}
case ActionTypes.ANSWER_LIST_LOADING:
return {...state, status: 'loading', errMess: null, answers: []}

case ActionTypes.ANSWER_LIST_FAILED:
return {...state, status: 'failed', errMess: action.payload, answers: []}
default:
return state;
}
}

这里的问题是，我在ANSWER_LIST_LOADING和ANSWER_LIST_FAILED情况下放置的空数组。每次动作创建者获取新数据时，它都会经过loading状态，在那里它会得到一个空数组，这会导致整个答案列表被重新呈现和不必要地重新创建。因此，我按照如下方式更改了实现，它解决了问题。

export const Answers = (state = {
status: 'idle',
errMess: null,
answers: []
}, action) => {
switch(action.type) {
case ActionTypes.ADD_ANSWER_LIST:
return {...state, status: 'succeeded', errMess: null, answers: action.payload}
case ActionTypes.ANSWER_LIST_LOADING:
return {...state, status: 'loading', errMess: null, answers: [...state.answers]}

case ActionTypes.ANSWER_LIST_FAILED:
return {...state, status: 'failed', errMess: action.payload, answers: [...state.answers]}
default:
return state;
}
}

一直以来，问题都在我从未想过会发生的地方。我甚至没有在问题中提到这个action。但你来了。