前端新手求助(大概跟 react js antdesign 有关)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2165 天前的主题，其中的信息可能已经有所发展或是发生改变。

dalao 们好，我们组做 web&soa 作业，前端想做一个像锤子 tnt 搜索一样，很多个卡片挨个出现的样式，目前基本上是用 react 和 antdesign 实现的 demo(等 json 全部收集全了再显示到页面上) 想知道如何转为动态的(异步刷新，来一个 json 包界面上出现一个 card)呢另外有的 card 如果没数据正常返回是不想展示的，这个又要怎么实现呢..:(´`」 ∠):_ ... 提前感谢回复的ヽ(•ω•。)ノ

9 条回复 • 2018-12-11 16:00:30 +08:00

gouflv

2018-12-11 09:14:12 +08:00 via Android

emmmm，这基础也敢用 react 写 demo ？

出门左拐 vuejs

InternetExplorer

2018-12-11 09:16:48 +08:00

正常异步操作就应该是来什么数据显示什么，不清楚你们怎么做成等待所有数据都到齐了才显示的

nznd

2018-12-11 10:38:21 +08:00

@InternetExplorer 后台是打包成一个大 json 返回的[•_•] 现在觉得速度太慢想异步操作但是有的 card 没有对应 json 返回是不想让他显示的如何做到收到一个 json 就渲染一个 card 呢
@gouflv 那 vuejs 要怎么实现呢

maplelin

2018-12-11 11:18:31 +08:00

这不就是简单的数据绑定吗，用不用 react 都能做啊，通过 ajax 拿到 json 之后在渲染成 html 不是前端的基础吗

Exin

2018-12-11 11:22:43 +08:00

# React
state = {
data: []
}

onReceiveJSON(json) {
this.setState({
data: data.concat(JSON.parse(json))
})
}

render() {
return this.state.data.map(item => renderCard(item))
}

根据您的基础，建议用 Vue，上手更快。

TomatoYuyuko

2018-12-11 11:24:42 +08:00

“如何做到收到一个 json 就渲染一个 card 呢”
ajax 不就是做这个的吗？？
拿到数据，渲染写回调里

ByZHkc3

2018-12-11 11:42:24 +08:00

判断返回的数据是否为空然后再渲染

raingolee

2018-12-11 11:58:34 +08:00

收到一个 json 判断是否为空，然后 setState 修改 Component 的 state，就会自动 render 重新渲染啦，楼楼主

nznd

2018-12-11 16:00:30 +08:00

@Exin #5 感谢！
@maplelin #4 感谢！
@TomatoYuyuko #6 我读了一下他们的代码，是先渲染了空的 card 数据留着下一次 setstate 才渲染。。。
@raingolee #8 谢谢！