Reactjs 使用外部json响应redux状态

我想从JSON文件中列出PostList.js组件中的帖子 我使用react redux进行状态管理，使用redux saga获取json文件

我的组件是Post.js和PostList.js：

Post.js

    const Post = ({ post }) => {
    <li>
       {post}
    </li>
    }
    export default Post

class PostList extends React.Component {
componentDidMount() {
    console.log('did mount');
    this.props.fetchPosts();
}
render() {
    return (
        <div>
            <ul>
                {this.state.posts(post => (
                    <Post key={post.id} {...post}  />
                ))}
            </ul>
        </div>
    )
}
}

export default PostList

export const fetchPosts = () => {
  return {
    type: 'FETCH_POSTS'
  }
}

export const fetchSuccess = data => ({
    type: "FETCH_SUCCESS",
    posts: data
})


export const fetchFaild = () => {
    return {
        type: 'FETCH_FAILD'
    }
}

export function* fetchProducts() {
try {
    console.log('saga')
    const posts = yield call(api_fetchPost);
    yield put({ type: "FETCH_SUCCESS", posts});
} catch (e) {
    yield put({ type: "FETCH_FAILD", e});
    return;
}
}

export function* watchFetchProducts() {
    yield takeEvery("FETCH_POSTS", fetchProducts)
}

Actions.js

    const Post = ({ post }) => {
    <li>
       {post}
    </li>
    }
    export default Post

class PostList extends React.Component {
componentDidMount() {
    console.log('did mount');
    this.props.fetchPosts();
}
render() {
    return (
        <div>
            <ul>
                {this.state.posts(post => (
                    <Post key={post.id} {...post}  />
                ))}
            </ul>
        </div>
    )
}
}

export default PostList

export const fetchPosts = () => {
  return {
    type: 'FETCH_POSTS'
  }
}

export const fetchSuccess = data => ({
    type: "FETCH_SUCCESS",
    posts: data
})


export const fetchFaild = () => {
    return {
        type: 'FETCH_FAILD'
    }
}

export function* fetchProducts() {
try {
    console.log('saga')
    const posts = yield call(api_fetchPost);
    yield put({ type: "FETCH_SUCCESS", posts});
} catch (e) {
    yield put({ type: "FETCH_FAILD", e});
    return;
}
}

export function* watchFetchProducts() {
    yield takeEvery("FETCH_POSTS", fetchProducts)
}

GetPosts.js（容器）

Saga.js

    const Post = ({ post }) => {
    <li>
       {post}
    </li>
    }
    export default Post

class PostList extends React.Component {
componentDidMount() {
    console.log('did mount');
    this.props.fetchPosts();
}
render() {
    return (
        <div>
            <ul>
                {this.state.posts(post => (
                    <Post key={post.id} {...post}  />
                ))}
            </ul>
        </div>
    )
}
}

export default PostList

export const fetchPosts = () => {
  return {
    type: 'FETCH_POSTS'
  }
}

export const fetchSuccess = data => ({
    type: "FETCH_SUCCESS",
    posts: data
})


export const fetchFaild = () => {
    return {
        type: 'FETCH_FAILD'
    }
}

export function* fetchProducts() {
try {
    console.log('saga')
    const posts = yield call(api_fetchPost);
    yield put({ type: "FETCH_SUCCESS", posts});
} catch (e) {
    yield put({ type: "FETCH_FAILD", e});
    return;
}
}

export function* watchFetchProducts() {
    yield takeEvery("FETCH_POSTS", fetchProducts)
}

---

您正在从postlist组件的状态获取帖子。Redux MapStateTrops将Redux状态映射到连接组件的道具，而不是状态

class PostList extends React.Component {
    componentDidMount() {
        console.log('did mount');
        this.props.fetchPosts();
    }
    render() {
        return (
            <div>
                <ul>
                    {this.props.posts && this.props.posts.map(post => {
                        return ( <Post key={post.id} {...post}  /> );
                    })}
                </ul>
            </div>
        )
    }
}

export default PostList

类PostList扩展React.Component{
componentDidMount（）{
log（'did mount'）；
this.props.fetchPosts（）；
}
render（）{
返回(

{this.props.posts&&this.props.posts.map（post=>{
返回（）；
})}

)
}
}
导出默认邮件列表

---

将

this.state.posts

更改为

this.props.posts

您的问题到底是什么？PostList.js:28未捕获类型错误：无法读取PostList.render（PostList.js:28）处null的属性“posts”好的，您能给我一些示例吗？你解决这个问题的方法是什么？我想问题是你的初始状态。它应该是一个posts设置为空数组的对象。相反，初始状态本身是空数组。是的，你是对的。tnxi已更改，但仍然有错误，我为constructor添加了这个，并更改了this.props.posts，但现在的错误是this.props.posts不是函数构造函数（props）{super（props）；}它应该是this.props.posts.map，post应该是一个数组。我正在编辑答案尝试添加一个验证this.props.posts&&this，props.posts.map（）我解决了这个问题，它处于初始状态以及您告诉的内容。tnx