1.fetch获取API接口数据
function fetchPosts(reddit){ return dispatch => { dispatch(requestPosts(reddit)) //注意单引号和反引号的区别 return fetch(`https://www.reddit.com/r/${reddit}.json`) .then(response => response.json()) .then(json => dispatch(receivePosts(reddit, json))) } }
2.组件内的逻辑判断
render() { const { selectedReddit, posts, isFetching, lastUpdated } = this.props const isEmpty = posts.length === 0 return ( <div> <Picker value={selectedReddit} onChange={this.handleChange} options={[ 'reactjs', 'frontend' ]} /> <p> {/**大括号,是**/} {lastUpdated && <span> Last updated at {new Date(lastUpdated).toLocaleTimeString()}. {' '} </span> } {/**大括号,否**/} {!isFetching && <a href="#" onClick={this.handleRefreshClick}> Refresh </a> } </p> {/**大括号,进行多次逻辑判断。添加行内样式**/} {isEmpty ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>) : <div style={{ opacity: isFetching ? 0.5 : 1 }}> <Posts posts={posts} /> </div> } </div> ) }
3.组件内部的循环输出
return ( <span> <h1>{value}</h1> {/**添加事件处理,那个onChange事件处理是已经被dispatch处理过的**/} <select onChange={e => onChange(e.target.value)} value={value}> {/**数据循环输出**/} {options.map(option => <option value={option} key={option}> {option} </option>) } </select> </span> )
4....