मैं useState के साथ एक समस्या का सामना कर रहा हूँ। नीचे कोडसैंडबॉक्स में चल रहा कोड है

https://codesandbox.io/s/kmznl0345r

यहाँ कोड ही है;

import React, { Fragment, useState } from "react";
import ReactDOM from "react-dom";

type FormElem = React.FormEvent<HTMLFormElement>;

interface ITodo {
  text: string;
  complete: boolean;
}

export default function App(): JSX.Element {
  const [value, setValue] = useState<string>("");
  const [todos, setTodos] = useState<ITodo[]>([]);

  const handleSubmit = (e: FormElem): void => {
    e.preventDefault();
    addTodo(value);
    setValue("");
  };

  const addTodo = (text: string): void => {
    const newTodos: ITodo[] = [...todos, { text, complete: false }];
    setTodos(newTodos);
  };

  const completeTodo = (index: number): void => {
    const newTodos: ITodo[] = todos;
    newTodos[index].complete = !newTodos[index].complete;
    setTodos(newTodos);
  };

  return (
    <Fragment>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={value}
          onChange={e => setValue(e.target.value)}
          required
        />
        <button type="submit">Add Todo</button>
      </form>
      <section>
        {todos.map((todo: ITodo, index: number) => (
          <Fragment key={index}>
            <div>{todo.text}</div>
            <button type="button" onClick={() => completeTodo(index)}>
              {" "}
              {todo.complete ? "Incomplete" : "Complete"}{" "}
            </button>
          </Fragment>
        ))}
      </section>
    </Fragment>
  );
}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

जब पूरा बटन क्लिक किया जाता है तो यह केवल एक बार completeTodo फ़ंक्शन चलाता है, और यह फिर से नहीं चलता है, भले ही सेटटोडोस फ़ंक्शन चलाया जाता है और टोडोस अपडेट हो जाते हैं।

यह react 16.7.0-alpha-2 में काम करता था लेकिन अब संस्करण 16.8.1 के साथ ऐसा लगता है कि यह अपडेट नहीं हो रहा है।

अपने किसी भी सुझाव के बारे में मुझे बताएं, और कोडसैंडबॉक्स में एक बार फिर कोड चल रहा है;

https://codesandbox.io/s/kmznl0345r

1
richbray89 20 फरवरी 2019, 17:56

1 उत्तर

सबसे बढ़िया उत्तर

आप वर्तमान में अपने completeTodo फ़ंक्शन में todo ऑब्जेक्ट को बदल रहे हैं। यदि आप इसके बजाय todos में सभी तत्वों के साथ एक नई सरणी बनाते हैं और एक नई वस्तु बनाते हैं जहां complete टॉगल किया जाता है तो यह अपेक्षा के अनुरूप काम करेगा।

const completeTodo = (index: number): void => {
  const newTodos: ITodo[] = [...todos];
  newTodos[index] = {
    ...newTodos[index],
    complete: !newTodos[index].complete
  };
  setTodos(newTodos);
};
4
Tholle 20 फरवरी 2019, 15:01