Question

componentDidMount quote等于{id: 16, text: "Be yourself; everyone else is already taken.", author: "Oscar Wilde", next_id: 18, previous_id: null}

之后

当我单击next时，会调用componentWillRecieveProps并尝试将quote更新为另一个对象。我收到一个错误。如果我尝试将其更改为字符串，则相同。但是当我尝试将quote更改为数字或布尔值时，它可以正常工作。

componentDidMount() {
  this.fetchQuote(16)
}

fetchQuote(id) {
  axios.get(`api/quotes/${id}`)
  .then(response => {
    console.log("Data: ", response.data);
    this.setState({
      quote: response.data
    }, ()=> {console.log("fetch: ", this.state);})
  })
  .catch(error => {
    console.error(error)
    this.setState({ fireRedirect: true })
  })
}

componentWillReceiveProps(nextProps) {
  this.qsParams = queryString.parse(nextProps.location.search)
  this.quoteId = Number(this.qsParams.quote)
  this.fetchQuote(this.quoteId)

}

componentWillReceiveProps(nextProps)成功触发器fetchQuote并且该函数发出请求并获取对象的正确数据，但无法将quote更改为接收到的数据

错误：

1) warning.js?6327:33 Warning: React.createElement: type is invalid -- 
expected a string (for built-in components) or a class/function (for 
composite components) but got: undefined. You likely forgot to export 
your component from the file it's defined in.

Check the render method of `QuotesDisplay`.
in QuotesDisplay (created by Route)
in Route (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter

2) Uncaught Error: Element type is invalid: expected 
a string (for built-in components) or a class/function (for composite 
components) but got: undefined. You likely forgot to export your 
component from the file it's defined in.

Check the render method of `QuotesDisplay`.
at invariant (invariant.js?7313:42)
at createFiberFromElementType (react-dom.development.js?cada:8185)
at createFiberFromElement (react-dom.development.js?cada:8130)
at reconcileSingleElement (react-dom.development.js?cada:9378)
at reconcileChildFibers (react-dom.development.js?cada:9477)
at reconcileChildrenAtPriority (react-dom.development.js?cada:10127)
at reconcileChildren (react-dom.development.js?cada:10118)
at updateHostComponent (react-dom.development.js?cada:10370)
at beginWork (react-dom.development.js?cada:10609)
at performUnitOfWork (react-dom.development.js?cada:12573)

3) The above error occurred in the 
<div> component:
in div (created by QuotesDisplay)
in div (created by QuotesDisplay)
in QuotesDisplay (created by Route)
in Route (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter

Consider adding an error boundary to your tree to customize error 
handling behavior.

4) Uncaught Error: A cross-origin error 
was thrown. React doesn't have access to the actual error object in 
development.
at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:1345)
at invokeGuardedCallback (react-dom.development.js?cada:1195)
at performWork (react-dom.development.js?cada:12800)
at batchedUpdates (react-dom.development.js?cada:13244)
at performFiberBatchedUpdates (react-dom.development.js?cada:1646)
at stackBatchedUpdates (react-dom.development.js?cada:1637)
at batchedUpdates (react-dom.development.js?cada:1651)
at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] 
(react-dom.development.js?cada:1664)
at dispatchEvent (react-dom.development.js?cada:1874)

React.js将状态属性更新为新对象

0 个答案: