使用Redux和Axios的UseEffect将用户输入添加到列表的开头

Question

首先，我的代码正在正常工作，并从Redux中提取数据。所有输入框都接收用户输入，并在提交后完美提交(如我的控制台中所示(。

我遇到的唯一问题是弄清楚如何在useEffect((中将这些信息发送到实际的DOM。当用户提交新数据时，我希望它最好显示在当前列表的顶部(unshift(((，而不是底部。

我已经盯着这个看了这么长时间了，我很确定我可能想得太多了。如果有任何帮助，我将不胜感激。

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/postActions';
const Posts = (props) => {
const [data, setData] = useState([]);
useEffect(() => {
if(setData(props.fetchPosts())){
props.posts.unshift(...props.post, props.newPost);
}
},[props.newPost]) 
console.log('new post',props.newPost)
const postItems = props.posts.map((item, index) => (
<div key={index}>
<h3>{item.title}</h3>
<p>{item.body}</p> 
</div>
))
return (
<div>
<h1>Posts</h1>
{postItems}
</div>
)
}
const mapStateToProps = state => ({
posts: state.posts.items, 
newPost: state.posts.item 
})
export default connect(mapStateToProps, { fetchPosts })(Posts);

Answer 1

有两种方法可以解决这个问题。

1. Update state value (props are immutable).
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/postActions';
const Posts = (props) => {
const [data, setData] = useState([]);

useEffect(() => {
if(props.fetchPosts()){
let dupData = [...data]
dupData.unShift(props.newPost)
setData(dupData)
}
},[props.newPost]) 
console.log('new post',props.newPost)
let updatedPosts = [data, ...props.posts]
const postItems = updatedPosts.map((item, index) => (
<div key={index}>
<h3>{item.title}</h3>
<p>{item.body}</p> 
</div>
))
return (
<div>
<h1>Posts</h1>
{postItems}
</div>
)
}
const mapStateToProps = state => ({
posts: state.posts.items, 
newPost: state.posts.item 
})
export default connect(mapStateToProps, { fetchPosts })(Posts);

2. 更新redux状态

Answer 2

如果你只是根据你的Redux状态来呈现postItems，我认为这个问题应该得到解决。在useEffect中调度一个操作将更改Redux状态，该状态应自动触发组件的重新发布。您也可以考虑在提交表单时直接发送一个操作，这可能会让一切变得更干净。

此外，我不建议在这里使用useState钩子，因为如果你也在使用Redux(在这个组件中(，这里就没有必要了。一个好的做法是只对组件本地的状态使用useState钩子，而对应用程序中的任何其他状态都没有帮助。