Блог

вероятно, я немного запутался в следующем задании. У меня есть страница администратора в моем приложении, где вы можете видеть все сообщения из формы plattform. Я запрашиваю сообщения из api и отображаю их на странице в виде списка. Я вставил две кнопки для включения/выключения записи, вызвав функцию, которая помечает запись как включенную/отключенную.

Все работает нормально, но я хочу изменить состояние кнопки без перезагрузки страницы. При передаче disable параметра я бросил тег кнопки. Я не знаю, почему это не работает, если я console.log там уже изменил значения. Правильно ли это использовать useeffect ? Я пытался использовать его, но мне не удалось использовать его правильно.

Кто-нибудь может помочь, пожалуйста?

Упрощенный код ( я удалил функцию включения, так как она почти такая же, как и отключение)

 export default function Feed(props) {   const [postStatus, setPostStatus] = useState(props.posts)    async function disablePost(id, e){  e.preventDefault();   const userInput = { postId: id }   try{  const res = await axios.post(`${baseurl}/api/auth/admin/disable-post`, userInput, {  })    var currentPostStatus = postStatus;  currentPostStatus.map((el) =gt; {  if(el.id === id){  el.disabled = true;  }  console.log(el.id)  });    setPostStatus(currentPostStatus)  console.log(postStatus)   }catch(error){  console.log(error)  return  }  }    return (  lt;gt;  lt;HeaderAdmingt;lt;/HeaderAdmingt;  lt;divgt;  {/* {console.log(props.userCount)} */}  lt;pgt;Alle Postslt;/pgt;   {postStatus.map((post) =gt;     lt;React.Fragment key={post.id}gt;  lt;pgt;{post.id}lt;/pgt;  lt;pgt;{post.email}lt;/pgt;  lt;pgt;{post.desc}lt;/pgt;  lt;pgt;{post.disabled == true ? 'Post deaktviert' : 'Post aktiviert'}lt;/pgt;    lt;button disabled={ post.disabled } onClick={(e) =gt; disablePost(post.id, e)}gt;Post deaktivierenlt;/buttongt;  lt;button disabled={ !post.disabled } onClick={(e) =gt; enablePost(post.id, e)}gt;Post aktivierenlt;/buttongt;  lt;/React.Fragmentgt;  )}  lt;/divgt;  lt;/gt;  ); }  

Ваш экран не может обновиться до новой версии после нажатия кнопки disable «Или enable «.

 var currentPostStatus = postStatus;  currentPostStatus.map((el) =gt; {  if(el.id === id){  el.disabled = true;  }  });  

В своем коде вы изменяете только внутреннее свойство postStatus , но React заботится только о ссылке на объект. поэтому вам нужно сделать

 setPostStatus([...currentPostStatus])  

В приведенной выше строке создайте новый массив. Я лично считаю, что это то, что React следует улучшить в будущем, потому что половина вопроса о React в stackoverflow говорит об этом 🙂