小编kon*_*oya的帖子
突变后如何更新分页列表？
我有一个带有消息列表的线程，该消息列表是通过GET_THREAD_MESSAGES查询获取的。该查询是分页的，具体取决于用户是否之前看到该线程，可能会加载第一页，最后一页或仅加载新消息。（即first/after/before/last可以使用任何值传递）
thread(id: "asdf") {
messageConnection(after: $after, first: $first, before: $before, last: $last) {
edges {
cursor
node { ...messageInfo }
}
}
}
现在我有一个sendMessage突变，我称之为，然后在该update突变的方法中，我想乐观地将发送的消息添加到线程消息中，以获得更好的UX。没有分页，我知道我会这样做：
const data = store.readQuery({
query: GET_THREAD_MESSAGES,
variables: { id: message.threadId }
})
data.messageConnection.edges.push(newMessageEdge);
store.writeQuery({
query: GET_THREAD_MESSAGES,
variables: { id: message.threadId },
data,
})
不幸的是，由于我知道有分页，因此该store.readQuery调用会引发一个错误，提示“它找不到该messageConnection线程的字段”，因为该字段现在类似于messageConnection({ after: 'jfds1223asdhfl', first: 50, before: null, last: null })。在阿波罗文档说，你应该用@connection指令的查询工作，解决这一问题。我试图将查询更新为如下所示：
thread(id: "asdf") {
messageConnection(...) @connection(key: …推荐指数
解决办法
查看次数
反应 dropzone 不能用 axios 发布
我正在尝试在我的代码中使用 react-dropzone 并使用 axios 向服务器发出 POST 请求，但是 POST 请求总是失败并且我不断收到以下错误：
未捕获（承诺）错误：请求失败，状态码为 500
这是我的组件
constructor(props) {
super(props);
this.state = {
accepted: [],
};
['handleChange', 'handleValidSubmit'].forEach(v => {
this[v] = this[v].bind(this);
});
}
handleValidSubmit(event, values) {
const data = {
accepted: this.state.accepted,
};
console.log(data);
axios({
method: 'post',
url:
'https://oc6tq8iop5.execute-api.ap-southeast-1.amazonaws.com/dev/upload',
data: JSON.stringify(data),
}).then(data => {
console.log(data);
onDrop: accepted => {
accepted.forEach(file => {
req.attach(file.name, file);
});
req.end(callback);
var formData = new FormData();
formData.append('gambar', values.accepted);
console.log(formData);
};
});
}
handleChange(event) {
const { target } …推荐指数
解决办法
查看次数
不能使用 Material-UI 的 <Button/> API 中的“startIcon”和“endIcon”
这是我针对单个组件的简单 React 代码，但每次检查时它都会抛出相同的警告。即使复制和过去示例仍然相同的警告和图标无处可见。请帮忙！
import React, { Component } from 'react';
import { Button } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
class AddWorkButton extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<React.Fragment>
<Button
variant="contained"
color="secondary"
startIcon={<AddIcon/>}
>
TEST
</Button>
</React.Fragment>
);
}
}
export default AddWorkButton;
推荐指数
解决办法
查看次数
Cypress Angular 什么时候可以开始测试？
我正在使用 Cypress 对我的 Angular 应用程序进行端到端测试。我观察到的一个片状来源是 Cypress 行动迅速，而我的应用程序（相对）较慢地准备好进行交互。Cypress 有一些经常被引用的博客 文章讨论了这个困境。
其中一篇博客文章中的示例建议劫持 addEventListener 来处理一个非常具体的示例。但我正在寻找的是适合 Angular 的“大锤”......任何人都有任何聪明的想法/技术，不涉及在进行测试活动之前为每个页面访问添加 10 秒的等待时间（顺便说一下确实有效） ? 我花了大量时间谷歌搜索无济于事。提前感谢您的想法！
旁白：我还发现了这个悬而未决的问题，如果它得到富有成效的解决可能是答案的一部分。
推荐指数
解决办法
查看次数
在 HTML 中隐藏和显示 Div 标签
在这里，我试图隐藏该块，但第一次我需要在每次刷新页面时双击该按钮。我在下面附上了我的代码以供参考。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display …推荐指数
解决办法
查看次数
如何自定义多材质数据网格标题轮廓？
我想改变 Mui Datagrid 轮廓的设计
到
由于某种原因无法上传代码，有参考资料或示例代码吗？
推荐指数
解决办法
查看次数
如何在JointJs中以编程方式创建链接到端口
我试图在JointJs中以编程方式创建链接到具有端口的devs.Model对象.
我试图从api(http://jointjs.com/api#joint.dia.Graph:addCell)使用addCell for graph ,但由于某种原因,创建的链接没有指向正确的端口圈源和目标devs.Model对象,而是整个元素本身.
这是我试图使用的代码:
var link = new joint.dia.Link({
source: {
id: srcModel.id,
port: 'out'
},
target: {
id: dstModel.id,
port: 'in'
}
});
// Assume graph has the srcModel and dstModel with in and out ports.
graph.addCell(link)
链接是创建的,但没有指向任何端口,所以我觉得只需要一点点调整就可以让这些链接起作用.
推荐指数
解决办法
查看次数
如何在 React 中设置带有图像的模态弹出窗口
我在 React 中有一个 Image 类，并且有一个按钮应该在每个图像上实现单击扩展。我决定使用模态弹出窗口，因此当我单击时，图像将在模态弹出窗口中显示更大。我发现很难将模态设置为图像。
先感谢您。
这是来自ImageReact 中的类：
<FontAwesome
className="image-icon"
name="expand"
title="expand"
onClick={this.showModal}
/>
<Modal show={this.state.isExpand} handleClose={this.hideModal} />
模态：
const Modal = ({ handleClose, show }) => {
const showHideClassName = show ? 'modal display-block' : 'modal display-none';
return (
<div className={showHideClassName}>
<section className="modal-main">
<button onClick={handleClose}>close</button>
</section>
</div>
);
};
推荐指数
解决办法
查看次数
Reactjs 如何在状态下初始化数组对象
我是 reactjs 的新手，我正在学习在 reactjs 中更改状态。我正在尝试以未知长度的状态初始化数组对象，然后使用设置状态更新数组对象。以下是代码：
state = {
error: null,
temperature: null,
isLoaded: false,
Weather5days: [],
};
所以我将 Weather5days 初始化为一个长度未知的数组。我通过 API 作为 json 获取 Weather5days 的数据，因此在获取后，我这样做：
then(json => {
var newArr = json.Forecasts.map(function(val) {
//Forecasts have length of 5 array
return {
date: val.Date,
};
});
console.log(newArr); // I checked, data is copied correctly in newArr.
this.setState({
Weather5days: newArr, //set state of the weather5days
});
});
现在上面的代码没有错误，但是当我调用 console.log(this.state.Weather5days) 时，数组是空的。所以我认为初始化 Weather5days 的方式是错误的，所以我尝试了以下方法：
state = {
error: null,
temperature: null,
isLoaded: false, …推荐指数
解决办法
查看次数
为 React 组件分配 Id
我们有一个 React Grid 组件，我们需要为所有 Grid 组件分配 Id。有什么建议我们该怎么做？组件片段如下所示：
<Grid
data={this.state.items}
sortable={{
allowUnsort: this.state.allowUnsort,
mode: this.state.multiple,
sortDir:this.state.sortDir
}}
sort={this.state.sort}
onSortChange={this.sortChange}
filterable={true}
filter={this.state.filter}
onFilterChange={this.filterChange}
onPageChange={this.pageChange}
total={this.state.total}
skip={this.state.skip}
pageSize={this.state.pageSize}
pageable={this.state.pageable}
scrollable={this.state.scrollable}
//style={{ height: '500px' }}
>
<Column
field="networkName"
sortable={{
allowUnsort: this.state.allowUnsort,
mode: this.state.multiple ? 'multiple' : 'single',
}}
onSortChange={this.sortChange} title="Network Name" width="400px" cell={NetworkNameCell} />
<Column field="networkGroups" title="Network Groups" width="250px" id="networkGroupsId"/>
<Column field="networkType" title="Network Type" width="250px" id="networkTypeId"/>
<Column field="providersCount" title="Assigned Providers" />
<Column field="locationsCount" title="Assigned Locations" />
<Column cell={this.DeleteCommandCell} title="Action" sortable={false} filterable={false} />
<span class="k-icon …推荐指数
解决办法
查看次数
标签 统计
javascript ×10
reactjs ×6
css ×2
material-ui ×2
angular ×1
apollo ×1
arrays ×1
axios ×1
cypress ×1
dropzone ×1
graphql ×1
html ×1
jointjs ×1
kendo-grid ×1
kendo-ui ×1
popup ×1
post ×1
react-apollo ×1
react-native ×1
testing ×1