USEFEFT不想更新我的显示

Question

我是新来的，所以请轻松:-)

我有一种感觉不正确地使用使用效率。基本上，我在页面上有一些广播按钮。当它们更改/单击时，我调用将可变调用状态设置为所选项目的函数。该变量也是使用效果的触发因素，因此我在称为过滤的对象变量上触发并执行一些过滤器。

在控制台中，当我登录它时，它的值中有正确的值，但是屏幕没有更新它们，这是因为我不是在状态下存储该值吗？

这是代码部分：（我将代码修剪为第一次使用变量过滤器）

const [state,setstate] = useState(0)

let projectsList = useSelector(state=>state.projectReducer.projects)
let filteredProject = projectsList

  useEffect(() => {
    if(projectsList) {
      if(state == "All") {
        //show all statuses
        setfilteredProject(projectsList)
      } else{
        //single filter
        filteredProject = projectsList.filter(o => o.state === state);
      }
    }
}, [state])

function toggleStatus(e){
  console.log("state changed");
  setstate(e.value)
}


    return (
      <div className="px-2 py-4 ">
        <div className="card h-fit my-4 lg:w-12/12">
        <div className='form-check form-check-inline'><input className='form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer' name='status' type='radio' id='status' onClick={(e)=>toggleStatus(e.target)} value='All' defaultChecked={true}></input><label className='form-check-label inline-block text-gray-800 font-normal mr-2' ><b>All Statuses</b> </label></div>
        <div className='form-check form-check-inline'><input className='form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer' name='status' type='radio' id='status' onClick={(e)=>toggleStatus(e.target)} value='Fundraising' defaultChecked={false}></input><label className='form-check-label inline-block text-gray-800 font-normal mr-2' >Fundrasing </label></div>
        <div className='form-check form-check-inline'><input className='form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer' name='status' type='radio' id='status' onClick={(e)=>toggleStatus(e.target)} value='Successful' defaultChecked={false}></input><label className='form-check-label inline-block text-gray-800 font-normal mr-2' >Successful </label></div>
        <div className='form-check form-check-inline'><input className='form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer' name='status' type='radio' id='status' onClick={(e)=>toggleStatus(e.target)} value='Expired' defaultChecked={false}></input><label className='form-check-label inline-block text-gray-800 font-normal mr-2' >Expired </label></div>
        </div>
        <div className=" my-2 lg:my-0 lg:mx-2 grid sm:grid-cols-3 sm:gap-2 grid-cols-1">
          {filteredProject.....

Answer 1

This is worked for me like this, You need to update the state.

const [radioValue, setRadioValue] = useState("male");
const [data, setData] = useState("");

const handleChange = (e) => {
 console.log(e.target.value);
 setRadioValue(e.target.value);
};

useEffect(() => {
if (radioValue === "male") {
  setData("This is Male");
} else {
  setData("This is FeMale");
}
}, [radioValue]);

return (
<div className="App">
  Male
  <input
    name="gender"
    type="radio"
    value="male"
    defaultChecked
    onChange={handleChange}
  />
  Female
  <input
    name="gender"
    type="radio"
    value="female"
    onChange={handleChange}
  />
  <div>
    <h3>{data}</h3>
  </div>
</div>
)

Answer 2

当值更改屏幕时，您应该尝试将过滤的备件保存为状态，并应更改显示屏。

Answer 3

您可以使用这样的使用效率，并且可以更新状态：

const ButtonUpdate = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('om')

  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  });
  
  return (
    <div>
      <p>Hi {name} you clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={() => setName(name === 'om' ? 'krishn' : 'Boldo`)}>
        Change name
      </button>
    </div>
  )
}