Javascript 反应JS。即使单击按钮时单个用户未跟随，页面上的所有用户对象也会消失

大家好，我是react 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>
)
  })
}

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

请看一下代码

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

---

当我点击按钮时，所有用户消失的原因是什么？非常感谢您的帮助。谢谢

您的追随者是一个对象，您使用数组对其进行了设置

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

---

[…followUsers.results]可能应该[…followUsers]吗？为什么在那里使用.results？我在后端使用django drf。因此，如果我们进行分页，所需的确切数据将在results对象中。您在console.log中看到正确的值了吗？是的。我可以看到正确的值。我现在将用从控制台得到的回答更新问题。请看一看。嗨，我去看看。但到底是追随者还是追随者用户，我对此相当困惑。谢谢：）对不起，下面是用户的回答是的，它工作得很好。谢谢你的回答和解释。：）