Javascript 反应挂钩：父组件未重新渲染
我正在尝试使用回调从子组件更新父组件的状态。状态和回调传递给文本输入。正在调用回调，父级的状态已更改，但不会重新加载。输入字段的值保持不变。如果使用强制渲染，则每次添加新角色时（根据需要），文本字段都会更新。我不确定是什么原因导致了这种情况，据我所知，提供的setState钩子应该重新加载，除非状态保持不变 编辑：（添加了父组件，而不仅仅是回调） 下面是父组件Javascript 反应挂钩：父组件未重新渲染,javascript,reactjs,Javascript,Reactjs,我正在尝试使用回调从子组件更新父组件的状态。状态和回调传递给文本输入。正在调用回调，父级的状态已更改，但不会重新加载。输入字段的值保持不变。如果使用强制渲染，则每次添加新角色时（根据需要），文本字段都会更新。我不确定是什么原因导致了这种情况，据我所知，提供的setState钩子应该重新加载，除非状态保持不变 编辑：（添加了父组件，而不仅仅是回调） 下面是父组件 import Card from './Card' import Instructions from './instructions'
import Card from './Card'
import Instructions from './instructions'
import Title from './title'
import React, { useRef, useState, useCallback, useEffect } from 'react'
import { DropTarget } from 'react-dnd'
import ItemTypes from './ItemTypes'
import update from 'immutability-helper'
const Container = ({ connectDropTarget }) => {
const ref = useRef(null)
const titleRef = useRef()
const instructionsRef = useRef()
const appRef = useRef()
useEffect(() => {
// add when mounted
document.addEventListener("mousedown", handleClick);
// return function to be called when unmounted
return () => { document.removeEventListener("mousedown", handleClick);};
}, []);
const handleClick = e => {
if (titleRef.current.contains(e.target)) {
setFocus("Title");
return;
} // outside click
else if(instructionsRef.current.contains(e.target)){
setFocus("Instructions");
return;
}
setFocus(null);
};
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const [focus,setFocus] = useState(null);
const [title, setTitle] = useState({id: "Title", text: "Default",type: "Title", data:[]});
const [instructions, setInstructions] = useState({id: "Instructions",type:"Instructions", text: "Instructions", data:[]});
const [cards, setCards] = useState([
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
},
{
id: 3,
text: 'Write README',
},
{
id: 4,
text: 'Create some examples',
},
{
id: 5,
text: 'Spam in Twitter and IRC to promote it',
},
{
id: 6,
text: '???',
},
{
id: 7,
text: 'PROFIT',
},
])
const moveCard = useCallback(
(id, atIndex) => {
const { card, index } = findCard(id)
setCards(
update(cards, {
$splice: [[index, 1], [atIndex, 0, card]],
}),
)
},
[cards],
)
const findCard = useCallback(
id => {
const card = cards.filter(c => `${c.id}` === id)[0]
return {
card,
index: cards.indexOf(card),
}
},
[cards],
)
const updateItem = useCallback(
(id,field,additionalData,value) => {
return;
},
[cards], //WHat does this do?
)
const updateTitle = text => {
console.log("Updating title")
let tempTitle = title;
tempTitle['text'] = text;
//console.log(text);
//console.log(title);
//console.log(tempTitle);
setTitle(tempTitle);
//console.log(title);
//console.log("done");
forceUpdate(null);
}
connectDropTarget(ref)
return (
<div ref={appRef}>
<div ref={titleRef} >
<Title item={title} focus={focus} updateFunction={updateTitle}/>
</div>
<div ref={instructionsRef} >
<Instructions item={instructions} focus={focus}/>
</div>
<div className="Card-list" ref={ref}>
{cards.map(card => (
<Card
key={card.id}
id={`${card.id}`}
text={card.text}
moveCard={moveCard}
findCard={findCard}
item={card}
focus={focus}
/>
))}
</div>
</div>
)
}
export default DropTarget(ItemTypes.CARD, {}, connect => ({
connectDropTarget: connect.dropTarget(),
}))(Container)
从“./Card”导入卡
从“./指令”导入指令
从“./Title”导入标题
从“React”导入React，{useRef，useState，useCallback，useffect}
从'react dnd'导入{DropTarget}
从“./ItemTypes”导入项目类型
从“不变性助手”导入更新
常量容器=（{connectDropTarget}）=>{
const ref=useRef（空）
const titleRef=useRef（）
const instructionsRef=useRef（）
常量appRef=useRef（）
useffect（（）=>{
//安装时添加
文件。添加的列表（“鼠标向下”，handleClick）；
//卸载时要调用的返回函数
return（）=>{document.removeEventListener（“mousedown”，handleClick）；}；
}, []);
常量handleClick=e=>{
if（标题引用当前包含（如目标））{
setFocus（“标题”）；
返回；
}//外部单击
else if（指令参考当前包含（如目标））{
setFocus（“说明”）；
返回；
}
设置焦点（空）；
};
const[，updateState]=useState（）；
constforceupdate=useCallback（（）=>updateState（{}），[]）；
const[focus，setFocus]=useState（null）；
const[title，setTitle]=useState（{id:“title”，text:“Default”，type:“title”，data:[]）；
const[instructions，setInstructions]=useState（{id:“指令”，类型：“指令”，文本：“指令”，数据：[]}）；
const[cards，setCards]=使用状态([
{
id:1，
文本：“编写一个很酷的JS库”，
},
{
id:2，
文本：“让它足够通用”，
},
{
id:3，
文本：“编写自述文件”，
},
{
id:4，
文本：“创建一些示例”，
},
{
id:5，
文字：“推特和IRC中的垃圾邮件，以促进它”，
},
{
id:6，
正文：“？？？”，
},
{
id:7，
正文:"利润",，
},
])
const moveCard=useCallback(
（id，atIndex）=>{
const{card，index}=findCard（id）
赛卡(
更新（卡片、{
$splice:[[index，1]，[atIndex，0，card]]，
}),
)
},
[卡片]，
)
const findCard=useCallback(
id=>{
const card=cards.filter（c=>`${c.id}`==id）[0]
返回{
卡片
索引：卡片。索引（卡片），
}
},
[卡片]，
)
const updateItem=useCallback(
（id、字段、附加数据、值）=>{
返回；
},
[卡片]，//这是做什么的？
)
const updateTitle=text=>{
console.log（“更新标题”）
让诱惑=标题；
TENTITLE['text']=文本；
//console.log（文本）；
//控制台日志（标题）；
//console.log（testitle）；
setTitle（TENTITLE）；
//控制台日志（标题）；
//控制台日志（“完成”）；
强制更新（空）；
}
connectDropTarget（参考）
返回(
{cards.map（card=>(
))}
)
}
导出默认DropTarget（ItemTypes.CARD，{}，connect=>({
connectDropTarget:connect.dropTarget（），
}))（集装箱）
import React from 'react'
function Title(props) {
if(props.focus === "Title")
return(
<input
id="Title"
class="Title"
type="text"
value={props.item['text']}
onChange = { e => props.updateFunction(e.target.value)}
/>
);
else
return (
<h1> {props.item['text']} </h1>
);
}
export default Title
从“React”导入React
功能名称（道具）{
如果（道具焦点==“标题”）
返回(
props.updateFunction（e.target.value）}
/>
);
其他的
返回(
{props.item['text']}
);
}
导出默认标题
const updateTitle = text => {
let tempTitle = title; // These two variables are the same object
tempTitle['text'] = text;
setTitle(tempTitle); // problem is here
}
const updateTitle = text => {
let tempTitle = {...title}; // tempTitle is a new object
tempTitle['text'] = text;
setTitle(tempTitle);
}
var a={name:1}
var b=a；
b、 name=2
var result=Object.is（a，b）
console.log（结果）
//正确const updateTitle = text => {
let tempTitle = title; // These two variables are the same object
tempTitle['text'] = text;
setTitle(tempTitle); // problem is here
}
const updateTitle = text => {
let tempTitle = {...title}; // tempTitle is a new object
tempTitle['text'] = text;
setTitle(tempTitle);
}
var a={name:1}
var b=a；
b、 name=2
var result=Object.is（a，b）
console.log（结果）
//正确