React.JS set new state and use it in same function-CodePudding

I was trying to setState and use the new value inside of same function.

Functions:

  const { setTasks, projects, setProjects } = useContext(TasksContext)
  const [input, setInput] = useState('')

  const handleNewProject = () => {
    setProjects((prevState) => [...prevState, {[input]: {} }])
    tasksSetter(input)
    setInput('')
  }

  const tasksSetter = (findKey) => {
    const obj = projects?.find(project => Object.keys(project)[0] === findKey)
    const taskArray = Object.values(obj)
    setTasks(taskArray)
  }

Input:

<input type='text' value={input} onChange={(e) => setInput(e.target.value)}></input>
<button onClick={() => handleNewProject()}><PlusCircleIcon/></button>

I understand, that when we get to tasksSetter's execution my projects state hasn't been updated yet. The only way to overcome it, that I can think of, is to use useEffect:

  useEffect(() => {
    tasksSetter(input)
  }, [projects])

But I can't really do that, because I would like to use tasksSetter in other places, as onClick function and pass another values as argument as well. Can I keep my code DRY and don't write the same code over again? If so, how?

CodePudding user response：

Here's something you can do when you can't rely on the state after an update.

const handleNewProject = () => {
  const newProjects = [...projects, {[input]: {} }];
  setProjects(newProjects);
  tasksSetter(input, newProjects);
  setInput('')
}

const tasksSetter = (findKey, projects) => {
  const obj = projects?.find(project => Object.keys(project)[0] === findKey)
  const taskArray = Object.values(obj)
  setTasks(taskArray)
}

We make a new array with the update we want, then we can use it to set it to the state and also pass it to your tasksSetter function in order to use it. You do not use the state itself but you do get the updated array out of it and the state will be updated at some point.