Question

我对来自数据库的问题有特定的意见。我不知道数组中有多少个问题，所以我用元素

上的函数映射创建了结构

<Fragment>
  <div className="paddingSection">
    <h1 className="large text-primary">Form Questions</h1>
    <form className="form" onSubmit={(e) => onSubmit(e)}>
      {form.questions.map((el, index) => (
        <Fragment key={index}>
          <div className="form-group">
            <label>{el}</label>
            <input
              type="text"
              placeholder={form.questions[index]}
              name={index}
              required
              onChange={(e) => onChange(e)}
            />
          </div>
        </Fragment>
      ))}
      <input type="submit" className="btn btn-primary my-1" />
    </form>
  </div>
</Fragment>

现在，我需要获取问题的答案并将其发送到数组元素中的数据库。但是我不知道该怎么做。我写的是：

const [answer, setAnswer] = useState('');
const [formData, setFormData] = useState([]);
const onChange = (e) => {
  //taken from actuall input
  setAnswer(e.target.value, answer);
  //table of all elements
  setFormData([answer, ...formData]);
};
const onSubmit = (e) => {
  e.preventDefault();
  addResponseToForm(match.params.company, match.params.id, formData, history);
};

但是我得到这样的东西： 7: "write" 8: "writ" 9: "wri" 10: "wr" 11: "w"

我知道我得到了实时响应，但是对于简单的问题，如何得出最终答案？

Answer 1

setAnswer()应该接受一个参数，即新值或函数。我看到您正在传递2个参数。

//taken from actuall input
setAnswer(e.target.value, answer);

在这种情况下，answer实际上是此状态变量的先前值。一种简单的解决方案是将setAnswer(e.target.value, answer);替换为setAnswer(e.target.value);。

另外，以下几件事可能会消除以后的困惑：

同时使用answer和formData似乎是多余的。
onChange={(e) => onChange(e)}可以替换为onChange={onChange}。该事件会自动传递。
将index用作key将导致重复输入密钥和不必要的重新渲染。

让我知道您是否需要任何进一步的帮助。我很乐意提供帮助。

干杯！ ?

Answer 2

尝试以下方法作为快速解决方案（尽管您想要完成的操作的更多信息可能会获得更好的建议）

onChange和onSubmit可以直接传递到表单和输入
form.questions[index]与el相同，因此请在循环中使用它
answer，setAnswer在这种情况下没有用，因为您不知道用户何时输入完
您可以使用name的{{1}}（由于它是索引）来定位input数组的索引想要。

formData

const [formData, setFormData] = useState([]);
const onChange = (e) => {
  setFormData((data) => {
    const updatedData = [...data];
    updatedDate[e.target.name] = e.target.value;
    return updatedData;
  });
};
const onSubmit = (e) => {
  e.preventDefault();
  addResponseToForm(match.params.company, match.params.id, formData, history);
};

Answer 3

这个答案中的任何一个都不起作用，但是我更改了某些部分并且运行良好。

 const [formData, setFormData] = useState([]);
 const onChange = (e) => {
   setAnswer({ ...answer, [e.target.name]: e.target.value });
   setFormData([answer, ...formData]);
 };

 const onSubmit = (e) => {
   e.preventDefault();
   let arr = Object.values(formData[0]);
   addResponseToForm(match.params.company, match.params.id, arr, history);
 };

反应挂钩结构的特定问题

3 个答案: