Question

我正在使用React JS和Redux开发一个简单的Web应用程序。我现在所做的只是通过操作来更新状态。但这不起作用。

我有这样的组件

@connect((store) => {
    return {
        tweets: store.tweets.tweets
    }
})
class TweetListComponent extends React.Component{

    constructor(props)
    {
        super(props);
        this.props.dispatch(fetchTweets());
        this.state = { tweets : this.props.tweets };
    }

    render()
    {
        var todos = this.state.tweets.map((item, index)=>{
            return <li>{item}</li>;
        })
        return (
        <div>
            <h3>Tweet List</h3>
            <ul>
            {todos}
            </ul>
        </div>  
        );
    }

}

module.exports = TweetListComponent;

正如您在构造函数中看到的那样，我正在调用fetchTweets（）函数，这是导入的Redux动作。然后获取TweetsReducer状态的tweets属性。

这是tweet reducer的定义。

export default function reducer(state={
    tweets : [ "this is default" ]
}, action){
    switch(action.type)
    {
        case 'FETCH_TWEETS': {
            return { tweets: ["How", "are", "you", "doing"] };
        }
    }
    return state;
}

根据我的代码，它应该显示此数组[“ How”，“ are”，“ you”，“ doing”]，因为我在构造函数中再次调用了fetchTweets操作来更新值。但是它仍在渲染此数组，[“这是默认值”]。我该如何解决这个问题？

Answer 1

用法应该像

@connect((store) => {
    return {
        tweets: store.tweets.tweets
    }
}, {
   fetchTweets
})

在组件中将其用作

componentDidMount() {
  this.props.fetchTweets();
}

也可以直接使用道具中的推文，不要将其存储在state中。 state更改后，您没有更新props

Answer 2

问题是您正在基于构造函数中的props设置状态，该状态仅被调用一次，尽管您在构造函数中调度了操作以获取tweet，但新的更新tweet不会立即可用。您应该直接在props中使用tweets而不是将其复制到state，因为将状态直接从props派生为反模式

class TweetListComponent extends React.Component{

    constructor(props)
    {
        super(props);
        this.props.dispatch(fetchTweets());
    }

    render()
    {
        var todos = this.props.tweets.map((item, index)=>{
            return <li>{item}</li>;
        })
        return (
        <div>
            <h3>Tweet List</h3>
            <ul>
            {todos}
            </ul>
        </div>  
        );
    }

}

使用Redux的React JS不会在触发操作时更新状态

2 个答案: