反应 JS。即使单击按钮时取消关注单个用户，页面上的所有用户对象也会消失

Question

大家好，我是反应 js 的新手，我有这段代码可以从列表中取消关注用户，代码正在运行，单击按钮时会关注所选用户，但问题是当我所有用户消失时单击取消关注按钮，我必须刷新页面才能看到列表中的其他用户。如何正确地做到这一点？我无法理解我在代码中做错了什么。

我希望它正常工作，因为当我们单击特定用户旁边的按钮时，只有该用户应该从列表中消失，而不是所有用户。

请看一下代码。

const [{user}, dispatch] = useStateValue();

const [followUsers, setfollowUsers] = useState([]); 

function unfollowUser(otherUser, index) {
    const updatedUsers = [...followUsers.results];
    console.log([updatedUsers[index]]);
    updatedUsers[index] = [updatedUsers[index]].filter(x => x.id !== user.id);
    setfollowUsers(updatedUsers);
    unfollowUserfunction("delete", otherUser);
}

async function unfollowUserfunction(method, otherUser) {
    try {
      await axiosInstance.request("/profile/" + otherUser.username + '/unfollow/', { method });
    } catch (e) {
      console.log(e);
    }
}



{followUsers.results && followUsers.results.map((otherUser, index) => {
   return (
      <div className="searchRows" key={otherUser.id}>
            <div className="searchRows__username">
               <p>{otherUser.username}</p>
            </div> 
         </div>
      </div>
      <div className="user__right">        
          <Tooltip title="unfollow">
            <CheckIcon className="search__unfollow_icon"
               onClick={() => {
                 unfollowUser(otherUser, index)
               }}
            />
         </Tooltip>
     </div>
  </div>
)
  })
}

followUsers 来自控制台的响应。

{count: 2, next: null, previous: null, results: Array(2)}
count: 2
next: null
previous: null
results: Array(2)
0: {id: 3, username: "tester1", full_name: "Test1", profile_pic: "/media/pimage/default.png"}
1: {id: 4, username: "tester2", full_name: "Test2", profile_pic: "/media/pimage/default.png"}
length: 2

单击按钮时所有用户消失的原因是什么？帮助将不胜感激。谢谢

Answer 1

你的追随者是一个对象，你用一个数组来设置它

function unfollowUser(otherUser, index) {
    const updatedUsers = [...followUsers.results];
    console.log([updatedUsers[index]]);
    updatedUsers[index] = [updatedUsers[index]].filter(x => x.id !== user.id);
    // an array is set to followers
    setfollowUsers(updatedUsers);
    unfollowUserfunction("delete", otherUser);
}

因此，followers.result 未定义，这就是您看到空白屏幕的原因。

试试这段代码，它将替换 results 属性，以便 UI 正确更新

function unfollowUser(otherUser, index) {
    const updatedUsers = [...followUsers.results];
    console.log([updatedUsers[index]]);
    updatedUsers[index] = [updatedUsers[index]].filter(x => x.id !== user.id);
    // an array is set to followers
    setfollowUsers(Object.assign({},followUsers,{results:updatedUsers}));
    unfollowUserfunction("delete", otherUser);
}