javascript - 使用 API 调用更新 React-Redux 中的组件状态

Question

我正在尝试设置一个 React 应用程序，在该应用程序中单击一个组件中的 map 标记会使用数据库中的数据重新呈现页面上的另一个组件并更改 URL。它可以工作，有点，但不是很好。我无法弄清楚如何从 Redux 获取状态并从适合 React 生命周期的 API 获取响应。

有两个相关的问题:

第一:注释掉的行“//APIManager.get()......”不起作用，但它下面一行的 hacked-together 版本起作用。

第二:我所在的行 console.log()-ing 响应无限记录并向我的数据库发出无限 GET 请求。

下面是我的组件:

class Hike extends Component {
  constructor() {
    super()
    this.state = {
      currentHike: {
        id: '',
        name: '',
        review: {},
      }
    }
  }

  componentDidUpdate() {
    const params = this.props.params
    const hack = "/api/hike/" + params
    // APIManager.get('/api/hike/', params, (err, response) => { // doesn't work
    APIManager.get(hack, null, (err, response) => { // works
      if (err) {
        console.error(err)
        return
      }
      console.log(JSON.stringify(response.result)) // SECOND

      this.setState({
        currentHike: response.result
      })
    })
  }

  render() {
    // Allow for fields to be blank
    const name = (this.state.currentHike.name == null) ? null : this.state.currentHike.name

    return (
      <div>
        <p>testing hike component</p>
        <p>{this.state.currentHike.name}</p>
      </div>
    )
  }
}

const stateToProps = (state) => {
  return {
    params: state.hike.selectedHike
  }
}

export default connect(stateToProps)(Hike)

另外:当我点击页面上的链接转到另一个 url 时，出现以下错误:

"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op."

Answer 1

看看你的代码，我想我会稍微不同地构建它

一些事情:

1. 尝试将 API 调用和获取数据转移到 Redux 操作中。由于 API fetch 是异步的，我认为最好使用 Redux Thunk

例子:

function fetchHikeById(hikeId) {
    return dispatch => {
        // optional: dispatch an action here to change redux state to loading
        dispatch(action.loadingStarted())
        const hack = "/api/hike/" + hikeId
        APIManager.get(hack, null, (err, response) => {
            if (err) {
                console.error(err);
                // if you want user to know an error happened.
                // you can optionally dispatch action to store
                // the error in the redux state. 
                dispatch(action.fetchError(err));
                return;
             }
             dispatch(action.currentHikeReceived(response.result))
        });
    } 
}

您也可以将调度映射到 fetchHikeById 的 Prop ，方法是像对待任何其他 Action 创建者一样对待 fetchHikeById。

1. 因为你有路径 /hike/:hikeId 我假设你也在更新路线。因此，如果您希望人们加入书签并保存并 url .../hike/2 或返回它。您仍然可以将 fetch 放在 Hike 组件中。

您放置 fetchHikeById 操作的生命周期方法是。

componentDidMount() {
    // assume you are using react router to pass the hikeId 
    // from the url '/hike/:hikeId' 
    const hikeId = this.props.params.hikeId;
    this.props.fetchHikeById(hikeId);
}

componentWillReceiveProps(nextProps) {
   // so this is when the props changed.
   // so if the hikeId change, you'd have to re-fetch.  
   if (this.props.params.hikeId !== nextProps.params.hikeId) {
       this.props.fetchHikeById(nextProps.params.hikeId)
   }
}