Javascript 当父组件更改状态(功能组件)时,子组件无法获得新道具
为什么我的子组件在父组件更改状态时不能获得新的道具。我在数据库中使用一个包含3个元素的列表来测试,并在Add\u Friend\u模式中声明list\u user\u selected来存储所有子Add\u Friend\u selected。我尝试在用户单击“添加朋友”模式中的“删除”按钮时,所选的状态列表用户将被更新。但当我点击第一个子组件的删除按钮时,props.list\u user\u selected刚刚得到数组[]。第二个子组件获取数组[第一个子组件]。第三个子组件获取数组[第一个子组件,第二个子组件]。我什么都试过了,但都没用。有人能给我解释一下为什么,以及如何修复它吗 子组件Javascript 当父组件更改状态(功能组件)时,子组件无法获得新道具,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,为什么我的子组件在父组件更改状态时不能获得新的道具。我在数据库中使用一个包含3个元素的列表来测试,并在Add\u Friend\u模式中声明list\u user\u selected来存储所有子Add\u Friend\u selected。我尝试在用户单击“添加朋友”模式中的“删除”按钮时,所选的状态列表用户将被更新。但当我点击第一个子组件的删除按钮时,props.list\u user\u selected刚刚得到数组[]。第二个子组件获取数组[第一个子组件]。第三个子组件获取数组[第一个
const Add_Friend_Selected = props => {
return (
<li className="list-group-item px-0 d-flex">
<figure className="avatar mr-3">
<img src={props.avatar} className="rounded-circle" alt="image" />
</figure>
<div>
<div>{props.name}</div>
<div className="small text-muted">{props.mobile}</div>
</div>
<a onClick={() => props.delete_user_selected(props.id)} className="text-danger ml-auto" data-toggle="tooltip" title="Remove">
<i className="mdi mdi-delete-outline"></i>
</a>
</li>
)
}
const Add_Friend_Modal = props => {
const [count_user_selected,set_count_user_selected] = useState(0);
const [list_user_selected,set_list_user_selected] = useState([]);
const user = useSelector((state) => state.user);
const input_mobile_friend = useRef("");
const delete_user_selected = (id) => {
const delete_user_index = list_user_selected.findIndex(user_selected => user_selected.props.id === id);
console.log(delete_user_index)
set_list_user_selected([...list_user_selected.splice(delete_user_index,1)])
}
const add_invite_friend = () => {
if(input_mobile_friend.current.value) {
call_api({
url : `/users/search?mobile=${input_mobile_friend.current.value}`
})
.then(response => {
const user_find = response.data.data;
if(user_find && !list_user_selected.some(user_selected => user_selected.props.id === user_find._id )) {
const new_user_selected = (
<Add_Friend_Selected name={user_find.name} avatar={user_find.avatar}
mobile={user_find.mobile} id={user_find._id}
list_user_selected={list_user_selected}
delete_user_selected={(id) => {
delete_user_selected(id)
set_count_user_selected(list_user_selected.length + 1)
}}
/>
)
set_list_user_selected([...list_user_selected,new_user_selected])
set_count_user_selected(list_user_selected.length + 1)
}
else {
console.log("Not found")
}
})
.catch(error => {
console.log(error)
})
}
}
const Add\u Friend\u Selected=props=>{
返回(
{props.name}
{props.mobile}
props.delete\u user\u selected(props.id)}className=“text danger ml auto”data toggle=“tooltip”title=“Remove”>
)
}
父组件
const Add_Friend_Selected = props => {
return (
<li className="list-group-item px-0 d-flex">
<figure className="avatar mr-3">
<img src={props.avatar} className="rounded-circle" alt="image" />
</figure>
<div>
<div>{props.name}</div>
<div className="small text-muted">{props.mobile}</div>
</div>
<a onClick={() => props.delete_user_selected(props.id)} className="text-danger ml-auto" data-toggle="tooltip" title="Remove">
<i className="mdi mdi-delete-outline"></i>
</a>
</li>
)
}
const Add_Friend_Modal = props => {
const [count_user_selected,set_count_user_selected] = useState(0);
const [list_user_selected,set_list_user_selected] = useState([]);
const user = useSelector((state) => state.user);
const input_mobile_friend = useRef("");
const delete_user_selected = (id) => {
const delete_user_index = list_user_selected.findIndex(user_selected => user_selected.props.id === id);
console.log(delete_user_index)
set_list_user_selected([...list_user_selected.splice(delete_user_index,1)])
}
const add_invite_friend = () => {
if(input_mobile_friend.current.value) {
call_api({
url : `/users/search?mobile=${input_mobile_friend.current.value}`
})
.then(response => {
const user_find = response.data.data;
if(user_find && !list_user_selected.some(user_selected => user_selected.props.id === user_find._id )) {
const new_user_selected = (
<Add_Friend_Selected name={user_find.name} avatar={user_find.avatar}
mobile={user_find.mobile} id={user_find._id}
list_user_selected={list_user_selected}
delete_user_selected={(id) => {
delete_user_selected(id)
set_count_user_selected(list_user_selected.length + 1)
}}
/>
)
set_list_user_selected([...list_user_selected,new_user_selected])
set_count_user_selected(list_user_selected.length + 1)
}
else {
console.log("Not found")
}
})
.catch(error => {
console.log(error)
})
}
}
const Add\u Friend\u Modal=props=>{
const[count\u user\u selected,set\u count\u user\u selected]=使用状态(0);
const[list_user_selected,set_list_user_selected]=useState([]);
const user=useSelector((state)=>state.user);
const input\u mobile\u friend=useRef(“”);
const delete_user_selected=(id)=>{
const delete_user_index=list_user_selected.findIndex(user_selected=>user_selected.props.id==id);
日志(删除用户索引)
设置所选用户列表([…所选用户列表.拼接(删除用户索引,1)])
}
const add_invite_friend=()=>{
如果(输入\u mobile\u friend.current.value){
调用api({
url:`/users/search?mobile=${input\u mobile\u friend.current.value}`
})
。然后(响应=>{
const user_find=response.data.data;
if(user\u find&!list\u user\u selected.some(user\u selected=>user\u selected.props.id==user\u find.\u id)){
const new_user_selected=(
{
删除所选用户(id)
设置所选的用户数量(列表用户所选长度+1)
}}
/>
)
设置所选用户列表([…所选用户列表,所选新用户])
设置所选的用户数量(列表用户所选长度+1)
}
否则{
console.log(“未找到”)
}
})
.catch(错误=>{
console.log(错误)
})
}
}
修复代码的步骤:
- 对于“useEffect”中的挂钩,不要在“componentDidMount”之外的位置调用API
- 如果要使用函数渲染组件,则需要在函数组件的返回方法中调用该函数
//state for update when your api call finished
const [user_find, set_user_find] = useState(null)
//useEffect for call your api
useEffect(() => {
//componentSkillMount its a variable for not update an unmounted component
let componentSkillMount = true;
call_api({
url : `/users/search?mobile=${input_mobile_friend.current.value}`
})
.then(response => {
//if your component skill mounted you can update that
componentSkillMount && set_user_find(response.data.data)
})
return () => componentSkillMount = false
}, [])
return (
//if the api call finished you can return a full component
user_find && (
<Add_Friend_Selected name={user_find.name} avatar={user_find.avatar}
mobile={user_find.mobile} id={user_find._id}
list_user_selected={list_user_selected}
delete_user_selected={(id) => {
delete_user_selected(id)
set_count_user_selected(list_user_selected.length + 1)
}}
/>
)
)
//api调用完成时更新的状态
const[user\u find,set\u user\u find]=useState(null)
//useEffect用于调用api
useffect(()=>{
//componentSkillMount为不更新未安装的组件而将其作为变量
让componentSkillMount=true;
调用api({
url:`/users/search?mobile=${input\u mobile\u friend.current.value}`
})
。然后(响应=>{
//如果你的组件技能提高了,你可以更新它
componentSkillMount&设置用户查找(response.data.data)
})
return()=>componentSkillMount=false
}, [])
返回(
//如果api调用完成,您可以返回完整的组件
用户查找(&U)(
{
删除所选用户(id)
设置所选的用户数量(列表用户所选长度+1)
}}
/>
)
)
尝试将此代码改编为您的:)您的父组件不会返回任何内容。您是否在问题中包含了所有代码?我建议您应该使用驼峰式命名约定,而不是当前的命名约定。新罕布什尔州ứCMắt vãi:))存储实例化的react组件是一种反模式,容易出现状态/属性过时的问题。相反,您应该存储UI可以从中派生的状态,即存储要作为道具传递到
Add\u Friend\u Selected
的数据,并在渲染函数返回中映射JSX。