【发布时间】：2020-03-24 14:59:24
【问题描述】：
我有一个组件（卡），它具有使用 Postgres 在 localhost 数据库中跟踪的复选框。当我选中或取消选中该框时，会在 networkusers 表中输入一个条目。问题是，当我选中或取消选中该框，然后单击一个按钮以呈现不同的组件，然后返回带有复选框的 Card 组件时，这些框未显示更新的检查。但是，如果我退出并重新登录，所有框都会更新并与数据库同步。那么，如何在以下组件中更改复选框后立即让组件呈现（或再次获取？）？泰。
import React, { useState } from "react";
const onUpdateCB = (ischecked, loginuser, userid, setisChecked,handleCheck,event) => {
console.log(ischecked, loginuser, userid);
fetch('http://localhost:3000/cb', {
method: 'post',
headers: {'Content-Type':'application/json'},
body:JSON.stringify({
loginuser,
userid,
ischecked: ischecked
})
}).then(setisChecked(ischecked));
};
const Card = props => {
const [isChecked, setisChecked] = useState(props.ischecked);
return (
<div
className="pointer bg-light-green dib br3 pa3 ma2 shadow-5"
onClick={() => props.handleClick(props.id)}
//onClick={(e) => e.stopPropagation()}
>
<div>
<h3>{props.name}</h3>
<p>{props.company}</p>
<p>{props.phone}</p>
<p>{props.email}</p>
<p>{props.city}</p>
</div>
<div>
My Network
<input
className="largeCheckbox"
type="checkbox"
checked={isChecked}
onClick={(event) =>
onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,event.stopPropagation())
}
/>
</div>
</div>
);
};
export default Card;
网络阵列
import React from "react";
import Card from "./Card";
const NetworkArray = ({
network,
networkusers,
handleChange,
handleClick,
loginuser
}) => {
console.log("in network array", networkusers);
const cardComponent = network.map((user, i) => {
const ischecked = networkusers.filter(n => {
var nw = n.id === loginuser.id && n.connections === network[i].id;
return nw;
});
console.log("i'm checked", ischecked);
return (
<Card
key={network[i].id}
name={network[i].firstname + " " + network[i].lastname}
company={network[i].company}
phone={network[i].phone}
email={network[i].email}
city={network[i].city}
ischecked={ischecked.length}
handleChange={handleChange}
handleClick={handleClick}
id={network[i].id}
loginuser={loginuser}
/>
);
});
return <div>{cardComponent}</div>;
};
export default NetworkArray;
【问题讨论】：
-
Card 属性
ischecked={ischecked.length}看起来很可疑 - 您可能想要ischecked = networkusers.some(n => n.id === loginuser.id && n.connections === network[i].id);并使用`ischecked={ischecked}设置属性。 -
我根据您的建议更改了它，但仍然得到相同的结果。当我单击另一个按钮以呈现另一个组件然后返回带有复选框的组件时，复选框仍然没有更新。我只有在退出并重新登录时才能看到更改。知道吗？
-
我看到另一个问题，解决方案是使用 useState 设置器的 函数更新表单，请参阅文档here。所以
onUpdateCB的变化将是}).then(setisChecked(previousValue => !previousValue))。另一个问题中的问题是时间问题，这也可能是您的问题，因为在调用 setter 之前发生了提取。此外，尝试在获取之前调用设置器，这将为您提供“标准”更新模式。 -
在这里查看另一个模式Custom setters with React useState hook，您的提取将发生在他说
// Some side-effect here ...的地方。我会让自定义设置器成为async函数和await提取。 -
试过这个但得到相同的结果： const onUpdateCB = (ischecked, loginuser, userid, setisChecked,event) => { console.log(ischecked, loginuser, userid); setisChecked(previousValue => !previousValue) fetch('localhost:3000/cb', { method: 'post', headers: {'Content-Type':'application/json'}, body:JSON.stringify({ loginuser, userid, ischecked: ischecked }) }) };
标签： reactjs checkbox react-hooks fetch-api