减速器数据未正确呈现

Question

api调用返回的数据为：

[
    {
        "1": {
            "id_post": 1,
            "id_user": "user01",
            "text": "post1 text",
            "parentId": 11
        }
    },
    {
        "2": {
            "id_post": 2,
            "id_user": "user01",
            "text": "post2 text",
            "parentId": 11
        }
    },
    {
        "3": {
            "id_post": 3,
            "id_user": "user01",
            "text": "post3 text",
            "parentId": 22
        }
    }
]

在 reducer 中，initialState 是：

const initialState = {
    posts: [],         // <= Have tried with posts: {} and posts: ''
    isFetching: false,
    error: {}
}

posts 的填充方式是：

case "FETCHING_POSTS_SUCCESS":
  return {
    ...state,
    isFetching: false,
    posts: action.data
 }

我可以mapStateToProps 发帖，如果我console.log("POSTS: ", this.props.posts) 我得到：

帖子：

0 : {1: {…}}
1 : {2: {…}}
2 : {3: {…}} 

这就是以下功能不起作用的原因吗？：

renderposts = (parentId = 1) => {
  return Object.keys(this.props.posts)
    .filter(id_post => this.props.posts[id_post].parentId == parentId)
    .map((key, idx) => {
        const post = this.props.post[key];
        return(
            <View>
                <Text> { post.id_post } - { post.text } </Text>
            </View>
        );
    });
}

我没有收到任何错误，但也没有显示任何内容。

我在想 POSTS 是否返回为：

{1: {…}}
{2: {…}}
{3: {…}} 

在控制台中（因此以这种方式呈现），它将起作用。如果是这样，我该怎么做？

非常感谢。

Answer 1

您的数据是array 而不是object，因此您不能对其进行Object.keys。
你应该先.map，然后循环遍历对象的键。

示例：

const posts = [
    {
        "1": {
            "id_post": 1,
            "id_user": "user01",
            "text": "post1 text",
            "parentId": 11
        }
    },
    {
        "2": {
            "id_post": 2,
            "id_user": "user01",
            "text": "post2 text",
            "parentId": 11
        }
    },
    {
        "3": {
            "id_post": 3,
            "id_user": "user01",
            "text": "post3 text",
            "parentId": 22
        }
    }
]

const View = ({postId,postText }) => {
  return(
    <div>{`${postId} - ${postText}`}</div>
  );
}

const renderposts = (parentId = 1) => {
 return posts.map(obj => {
    return Object.keys(obj)
    .filter(id => obj[id].parentId == parentId)
    .map((key, idx) => {
        const post = obj[key];
        return(
            <View postId={post.id_post} postText={post.text}/>
        );
    });
  });
}

class App extends React.Component{
  render(){
    return(
    <div>
      {renderposts(11)}
    </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

当posts 在数组中时，您不应该使用Object.keys：

renderposts = (parentId = 1) => {
    return this.props.posts
        .filter((post) => post.parentId === parentId)
        .map((post) => {
            return(
                <View>
                    <Text> { post.id_post } - { post.text } </Text>
                </View>
            );
       });
}

Answer 3

您可以在渲染方法中console this.props.posts。 有时你的组件会在从 api 获取数据之前被渲染。 为确保不会发生这种情况，您应该将另一个变量 isFetched 保留为

const initialState = {
    posts: [],         
    isFetching: false,
    isFetched: false
    error: {}
}

并且在 api 成功调用之后 make 为 true

case "FETCHING_POSTS_SUCCESS":
  return {
    ...state,
    isFetching: false,
    posts: action.data,
    isFetched: true
 }

所以在渲染中你可以检查

if(this.props.isFetched){
//do you code
}
else
return;