Question

我的应用在使用fetch从API检索数据时处于加载状态。

我使用setState的回调在loading: true和loading: false之间切换。一切都在FF和Chrome中完美运行，但在Safari中窒息而死。

使用react-devtools我可以看到我从API接收数据。我的state.loading甚至更新为false。

然而，儿童组件没有更新，我被一个永恒的旋转器困住了。

Safari控制台完全空白。

如果我从应用程序中拉出加载状态，一切都会加载。但是每次点击都会得到一个TypeError: null is not an object (evaluating 'openingComment.nextSibling')。也没有在Chrome和FF中获得。

我在这里不知所措。我如何驱除这些Safari恶魔？任何帮助将不胜感激。

这是相关代码。我是预重构阶段，因此我知道其中很多都可以改进。即在同一个函数中调用setState两次。

来自App.js

    class App extends Component {

      state = {
        data: {},
        formData: {},
        loading: true
      }

      getFormData = () => {
        const newState = {
          // Getting formData from url params
        }

        const mergedState = {...this.state, ...newState}

        this.setState(mergedState, () => {
          // get data from API
          getData(this.state.formData, (data) => {

            let newState = {
              data,
              loading: false
            }

            const mergedState = {...this.state, ...newState}

            this.setState(mergedState)
          })
        })
      }

      setFormData = (formData) => {

        const parsedAddress = this.parseAddress(formData.address.address_components)

        const newState = {
          formData: {
            // Get formData from form submission
          }
        }

        const mergedState = {...this.state, ...newState}
        // Put formData in state
        this.setState(mergedState, () => {
          // Get API data
          getData(this.state.formData, (data) => {

            let newState = {
              data,
              loading: false
            }

            const mergedState = {...this.state, ...newState}

            this.setState(mergedState)
          })
        })
      }

      renderComponents = () => {
        if(isEmpty(this.state.formData) && this.state.data.medianScore === 0) {
          // Return Component
        } else {
          return <Report
                  loading={this.state.loading}
                  // A bunch more props.
                  />
        }
      }

      render () {
        return (
          <div>
            {this.renderComponents()}
          </div>
        )
      }
    }

    export default App

报告

    class Report extends React.Component {

      render () {

        const renderReport = () => {
          // This is where our problem is
          if (this.props.loading) {

            // These components render properly
          } else {
            // Even though this.props.loading gets set to false
            // These components never get renderd
          }
        }

        return (renderReport())
      }
    }

    export default Report

子组件未在Safari中更新。就像Chrome和FF中的魅力一样

0 个答案: