Можете ли вы вызывать один и тот же хук useState внутри одной и той же функции более одного раза? - PullRequest
Новая
       12

Можете ли вы вызывать один и тот же хук useState внутри одной и той же функции более одного раза?

1 голос
/ 23 января 2020

Так что в процессе рефакторинга моего компонента чат-бота на основе классов для использования ловушек реагирования я столкнулся с проблемой с ловушкой useState, перезаписывающей объект в состоянии. Это приводит к тому, что в пользовательском интерфейсе отображаются только ответы ботов. Когда я общаюсь с ботом, fla sh пользовательского ввода отображается в пользовательском интерфейсе, а затем перезаписывается ответом chatbots. Вот код: 


export const Chatbot = () => {
  const [messages, setMessages] = useState([]);
  const [value, setValue] = useState("");

  async function df_text_query(text) {
    let says = {
      speaks: "me",
      message: {
        text: {
          text
        }
      }
    };
    setMessages([...messages, says]);

    const res = await axios.post("/api/df_text_query", {
      text,
      userID: cookies.get("userID")
    });

    // Handles fullfillment routes for dialogflow
    res.data.fulfillmentMessages.forEach(message => {
      says = {
        speaks: "bot",
        message
      };
      setMessages([...messages, says]);
    });
  }

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (value !== "") {
      const message = value.split();
      df_text_query(message);
    }
    setValue("");
  };

  const handleButtonSend = async event => {
    const eventText = event.target.innerText;
    await setValue(eventText);
    const message = value.split();
    await df_text_query(message);
    await setValue("");
  };

  return (
    <div>
      <div>chatbot code here</div>
    </div>
  );
};

Можно ли написать useState, как это, дважды в одной и той же функции asyn c? Если нет, как вы предлагаете, я реорганизую этот код, чтобы состояние сообщений возвращало массив чередующихся объектов, таких как: 

[{says: {
   speaks: "me",
   message: {
       text: {
          text
       }
    }
  }
},
{says: {
   speaks: "bot",
   message: {
      text: {
        text
      }
     }
   }
 },
{says: {
   speaks: "me",
   message: {
       text: {
          text
       }
    }
  }
},
{says: {
   speaks: "bot",
   message: {
      text: {
        text
      }
     }
   }
 }
]```

Any answer would be very much appreciated. I've been stuck on this problem for a while now. If you need more information I'm happy to provide!

Cheers,

Jacks

1 Ответ

1 голос
/ 24 января 2020

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

 async function df_text_query(text) {
    let says = [{
      speaks: "me",
      message: {
        text: {
          text
        }
      }
    }];

    const res = await axios.post("/api/df_text_query", {
      text,
      userID: cookies.get("userID")
    });

    // Handles fullfillment routes for dialogflow
    let saysBatch = [says, ...res.data.fulfillmentMessages.map(message => ({
        speaks: "bot",
        message
      }))];
    setMessages([...messages, ...saysBatch]);
...