"ReduxPromise"を使わずに反応を処理する約束

Question

"ReduxPromise"を使わずに約束事に取り組もうとしています。

return (
    <div> 
     <div>{this.props.weatherData.then(response => {return response.data.city.name})}</div> 
    </div> 
); 

は、しかし、私はこのエラーを取得する：

bundle.js:1212 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). 

I console.log(response.data.city.name)が、私は結果の文字列を取得しない場合。 ReduxPromiseで

、私はこれをしなければならない。

<div>{this.props.weatherData.data.city.name}</div> 

しかし、私はReduxPromise

なしでそれをやってみたい：その後、私は唯一のコンポーネントでこれを返す必要が

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 

ReduxPromiseなし、this.props.weatherDataは約束です。どのように私はコンポーネントでこれを処理するのですか？無限に出力

render(){ 
    if (!this.props.weatherData) { 
     return <div></div> 
    }; 

    this.props.weatherData.then(response => { 
     this.setState({ weatherData: response.data }); 
     console.log(this.state.weatherData.city.name); 
    }); 

市名：この下に行う

は無限ループを行います。

Answer 1

jsxのthis.props.weatherData.then（...）の戻り値をレンダリングしようとしています。これは、エラーメッセージが示すものです。代わりに、データをフェッチして状態に入れ、その状態に基づいてレンダリングします。

例：次に

componentWillReceiveProps(nextProps) { 
    if (!nextProps.weatherData) { 
     return; 
    }; 
    nextProps.weatherData.then(response => { 
      this.setState({ city: response.data.city.name }); 
    }); 
} 

：@TLaddへ

class WeatherDataComp extends React.Component { 
    state = { 
    weatherData: null 
    } 

    componentDidMount() { 
    this.props.weatherData.then(response => { 
     this.setState({ weatherData: response.data }) 
    }) 
    } 

    render() { 
    if (!this.props.weatherData) { 
     return null 
    } 
    return (
     <div>{this.state.weatherData.city.name}</div> 
    ) 
    } 

} 

Answer 2

おかげで、私は、ライフサイクルの方法、すなわちcomponentWillReceivePropsを必要

render(){ 
    if (!this.props.weatherData) { 
     return <div></div> 
    }; 
    return (
     <div> 
      <div>{this.state.city}</div> 
     </div> 
    ); 
} 

そして無限ループのために、私はそれで、これが原因です： setState原因t再レンダリングするコンポーネントである場合は、.thenコールバックが呼び出されますので、setStateを再度呼び出してから再レンダリングしてください。