React :尝试从子组件获取状态时状态为空
React :尝试从子组件获取状态时状态为空
提问于 2021-02-07 21:18:08
我有两个react组件。第一个组件是在调用我的api之后管理第二个组件的列表，我试图放置一个删除按钮来从列表中删除一个组件。
我得到了一个奇怪的行为:当我单击remove document按钮时，文档被设置为一个空数组。我得到了一个文档的空数组的日志。
父组件：
export const DocumentEnvelope: React.FC<DocumentEnvelopeProps> = (props) => {
const [documents, setDocuments] = useState([]);
useEffect(() => {
setDocuments([]);
axios.get("/myurl").then(response => {
response.data.forEach(document => {
setDocuments((doc) => [...doc, <Document name={document.name} removeDocument={removeDocument}/>]);});
});
}, []);
const removeDocument = (name) => {
console.log(documents);
setDocuments(documents.filter(item => item.name !== name));
};
return (
<>
{documents}
</>
);
};子组件：
interface DocumentProps {
removeDocument,
name: string
}
export const Document: React.FC<DocumentProps> = (props) => {
return (
<div>
My document
<button onClick={() => props.removeDocument(props.name)}>
Remove document
</button>
</div>
);
};回答 2
Stack Overflow用户
发布于 2021-02-07 21:26:08
<Document name=document.name removeDocument={removeDocument}/>此部分缺少document.name周围的花括号，请考虑使用不同的变量名，因为document用于在javascript中引用html文档。我还可以建议将数据存储在状态中，而不是组件本身。
Stack Overflow用户
发布于 2021-02-07 21:35:31
您正在过滤documents数组，就好像它由document对象组成一样。但是您已经将documents数组设置为Document React元素的列表。
让您的documents数组包含纯JS对象，即从response而不是React元素获取的document。在JSX中使用map遍历documents并返回<Document.../>元素。
我的意思是这样的：
export const DocumentEnvelope: React.FC<DocumentEnvelopeProps> = (props) => {
const [documents, setDocuments] = useState([]);
useEffect(() => {
axios.get("/myurl").then(response => {
setDocuments(response.data);
}, []);
const removeDocument = (name) => {
setDocuments(documents.filter(document => document.name !== name));
};
return (
<>
{documents.map((document)=>
<Document name={document.name} removeDocument={removeDocument}/>
)}
</>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66088396
复制相关文章
相似问题
腾讯云开发者
