问子组件在父组件更改状态时不会获得新的支持(功能组件)
EN

Stack Overflow用户

提问于 2020-10-13 09:42:22

回答 1查看 195关注 0票数 0

当父组件更改状态时，为什么我的子组件没有得到新的道具。我使用数据库中带有3个元素的列表来测试，在Add_Friend_Modal中使用状态Add_Friend_Modal来存储所有子Add_Friend_Selected。我尝试当用户单击Add_Friend_Modal中的移除按钮时，状态list_user_selected将被更新。但是，当我单击第一个子组件的删除按钮时，props.list_user_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)
                })
        }
    }

javascript

reactjs

react-hooks

电商出海AIGC福利包

嘿！这里有一份电商AIGC福利包等你查收！【电商素材提效】【物料本土化】超多AIGC能力免费送！快点击参与吧！

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-13 14:21:24

修复代码的步骤：

在“useEffect”

中不调用“componentDidMount”以外的其他位置的apis

如果要使用函数来呈现组件，则需要在功能组件

的返回方法中调用它

看看这些代码是否可以帮助您：

//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)
      }}
      />
  )
)