setState обновляет компонент на одно состояние позже - PullRequest
Новая
       6

setState обновляет компонент на одно состояние позже

2 голосов
/ 21 сентября 2019

В следующем коде имя (или любой другой объект / не только строка) обновляется в компоненте только после 2-го изменения. При 3-м изменении оно получает 2-е значение изменения и т. Д., Т. Е. Состояние на один шаг позади.

состояние на один шаг позади 

const [state,setState]=useState([]);

const onChange=(id)={
let vname="hello world";
const temp = state.map((item,i)=>{
if(i===id){
return vname;
}
return item;
});
setState(temp);
}

1 Ответ

3 голосов
/ 21 сентября 2019

Во-первых, этот код выглядит немного некорректно: событие onChange должно получить обработанное для него событие.

попробуйте что-то вроде этого: 

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

import "./styles.css";

const App = () => {
  const [name, setName] = useState("");
  const [reg, setReg] = useState(["dog", "cat", "monkey"]);
  const [pujab, setPujab] = useState("");
  return (
    <div>
      <label htmlFor="name">firstName:</label>
      <input
        name="name"
        type="text"
        value={name}
        onChange={e => {
          const newFirstName = e.target.value;
          setName(newFirstName);
        }}
      />

      <div />

      <label htmlFor="play">ChangeList: </label>
      <input
        name="play"
        type="text"
        value={pujab}
        onChange={e => {
          const newPujab = e.target.value;
          setPujab(newPujab);
          console.log("iniitiitit");
          for (let i = 0; i < reg.length; i++) {
            if (reg[i] === e.target.value) {
              console.log("yessss");
              reg[i] = "welcome";
            }
          }
        }}
      />
      <p>Animal List: {reg.map(item => item + " ")}</p>
      <p>Changes: {name}</p>
      <p>Names: {pujab}</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

У меня это есть на codesandbox здесь:https://codesandbox.io/s/amazing-hodgkin-7x9nn

...