小白在react+dva+antd中踩的一些坑

记录下来,一来给自己提醒,二来帮助一些朋友们解决问题。大部分都是很傻的坑,但就是踩了,orz
样式方面

1)、使用antd的table 想要改变td的样式,比如想要显示不完时省略
下图中2是官方文档的写法,当我们想要改变td样式时可以自己写一个render,见1

2.逻辑方面

用的是dva,先简要概括一些model里各个的用法:
namespace:唯一
state:初始化数据
subscriptions:路由变化,拿页面最初始数据 监听
effects:请求数据 处理异步action
reducers: 更新数据

1)、想向后端发送一个请求,得到返回值后再提交另一个请求,像promise.then一样。
错误思路:
一开始很傻地直接前后写了两个dispatch,结果错误,虽然分前后顺序调用了接口(dispatch是同步执行的),可是并没有根据第一个dispatch的结果动态调用第二个接口。

解决方法:
在model里的effects中相关的函数里调用第二个接口

所以使用effects的put来触发action。

首先用dispatch向后端发起第一个请求,

接着在effects里addAddressable函数里调用第二个请求

model.js:

2)、如何在effects里获取state里维护的值
如上图,payload里需要sate里的deviceName、description等根据前面的图应该知道应该用select可是网上大概有两种方法:const todos = yield select(state => state.todos);const {id} = yield select(_=>_.storeIf) storeIf 是model的namespace
我使用第一种获取不到,原因还不知道。所以如果法一获取不到,不妨用法二
const {deviceName,description,templateDetail} = yield select(_=>_.device);
3)、如何在render里动态渲染不同的div?在render中使用if else会报错

解决:使用三元运算符 a?b:c
a是一个触发不同div的条件,b是一个div,c是另一个div

4)、根据后端数据动态渲染input数量,并且把输入值存到state中接受到的数据肯定是一个对象,类似:{
{
a:1
},
{
b:2
}
}用map遍历得到a,b。但接下来一个问题是动态存入数据。解决:
把后端可能要显示的字段都先在model的state中设置初始值。
我这里是可能显示port或者address.
在state写:
{
address:””,
port:0
}
通过[] 可以动态存入port或者address

暂时遇到的就是这样了,其实准确来说也不是坑,是我在学习这个上的比较费时间的一些东西。发出来就是希望大家百度问题时看到,尽快解决,少花点时间。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理