Question

我从最近几天开始学习React Redux。我已经建立了一个小应用程序。我正在尝试使用更新的新闻对象将数据发送回API。

以下是新闻项目组件的代码。

import React, { Component} from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import { updateArticleLikes } from '../../actions/updateNews';

class NewsItem extends Component {
  constructor(){
    super()

    this.state = {
      likes: 0,
      key: ''
    }
  }

  componentDidMount(){
    this.setState({
      likes: this.props.item.likes,
      key: this.props.item.key
    })
  }

  increaseCount = event => {
    this.newState(event);
  }

  newState = (event) => {
    console.log(this.state)
    this.setState({
      likes: this.props.item.likes + 1,
      key: this.props.item.key
    }, this.submitUpdate(event))
  }

  submitUpdate = (event) => {
    event.preventDefault();
    // console.log(this.state)

    this.props.updateArticleLikes(this.state)
    this.setState({likes: 0, key: ''})
  }

  render(){
    const {item } = this.props
    return(
      <div key={item.key} >
        <h4> - <a href={item.url} target="_blank" rel="noopener noreferrer">{item.title} </a></h4>
        <button onClick ={ this.increaseCount }  data-likes={item.likes} value={item.key}>Like { this.state.likes }</button>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    { updateArticleLikes }, dispatch);
};


export default connect(null, mapDispatchToProps)(NewsItem);

这是updateArticleLikes操作的代码。

   import { API_URL } from '../global';

    export function updateArticleLikes(data) {
      // here, it shows old state in data
     console.log(data)
      return dispatch => {
        console.log(JSON.stringify({"article": data}))
        return fetch(API_URL + '/newsupdate', {
          method: 'PATCH',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({"article": data})
       })
      }
    }

问题是由于某种原因，函数updateArticleLikes正在接收先前的状态。我确信newState函数正在更新本地状态，因为我可以在按钮标记（{this.state.like}）中看到它在DOM中的值，但我不明白为什么动作正在接收先前的状态

我想到了mapStateToProps，但在这种情况下它不起作用，因为我正在处理本地状态。过去两天不能让它运作起来！有什么建议吗？

工作的解决方案：

Oblosys帮我解决了这个问题。从submitUpdate函数中删除参数并删除seState和preventDefault后，我的函数现在运行得很好。它正在更新并显示正确的状态，并将正确的数据发送到服务器。对于遇到同样问题的人，这是我更改的代码。

  newState = (event) => {
    console.log(this.state)
    event.persist()
    this.setState({
      likes: this.props.item.likes + 1,
      key: this.props.item.key
    }, this.submitUpdate)
  }

  submitUpdate = () => {
    this.props.updateArticleLikes(this.state)
  }

Answer 1

由于this.submitUpdate(event)是this.setState的参数，因此在setState被调用之前进行评估，而不是在状态更新时进行评估。您可以通过将其变为thunk来阻止这种情况：() => this.submitUpdate(event)。

请注意，如果您想在event.persist()回调中使用该事件，您还必须执行setState（或者，最好在此之前处理preventDefault而不是传递它，因为在持久化事件上调用preventDefault有点狡猾。）

Action正在React Redux应用程序中接收以前的本地状态

1 个答案: