Reactjs 使用React自定义Web聊天机器人的UI

我正在一个项目中工作，我在Azure中挂起了一个机器人，我正在尝试使用React自定义web聊天UI，当用户进入“日程会议”时，将显示React组件，允许用户在表单中输入详细信息。提交表单时，数据将发送到bot

我已经看到，这可以通过使用Redux中间件和一个名为useSendPostBack的钩子来解决。但是，由于我是新的反应，有谁能指导我如何实现这一点，useSendPostBack钩子是如何工作的，我的echo机器人是如何接收它的

---

谢谢您的帮助。

使用sendpostback

是一个钩子，因此必须在组件中调用它。可能有一种方法可以通过Redux中间件发送提交，但使用这个钩子是不行的

还要求您不能有条件地调用钩子，因此必须在某些组件（如

FormSubmitted

）的顶层调用钩子，只有在表单准备好提交时才渲染钩子

一般来说，您不会在Redux中放入表单状态，但如果您这样做，它不会破坏任何东西。您可以使用react-redux中的钩子从redux中获取表单状态

我不熟悉这个框架。可能有更好的方法通过回调函数而不是挂钩来实现这一点。但您所描述的内容——将表单状态存储在Redux中，并通过

useSendPostBack

提交给bot——可能与此类似

const FormSubmitted = () => {
  // Get form data out of Redux
  const formData = useSelector(state => state.someProperty);
  // Send to bot
  useSendFormBack(formData);

  // I'm not sure how you access the success/failure from the bot
  return (
    <div>Submitting Form...</div>
  )
}

const FormPage = () => {
  const [didSubmit, setDidSubmit] = useState(false);
  
  return didSubmit
    ? <FormSubmitted/> 
    : <FormFields onSubmit={() => setDidSubmit(true)}/>
}

// Now form data comes from props
const FormSubmitted = ({formData}) => {
  // Send to bot
  useSendFormBack(formData);

  // I'm not sure how you access the success/failure from the bot
  return (
    <div>Submitting Form...</div>
  )
}

const FormPage = () => {
  // Store the whole data object, or null if not submitted
  const [submittedData, setSubmittedData] = useState(null);
  
  // FormSubmitted gets the data as a prop
  // FormFields calls the onSubmit function with the its data as the argument
  return submittedData !== null
    ? <FormSubmitted formData={submittedData}/>
    : <FormFields onSubmit={(data) => setSubmittedData(data)}/>
}