REACT数组是真还是假输入？

Posted 2021-04-11

我在序列化输入并将其保存到API时遇到困难。我无法使它工作。需要一些建议或意见，以了解如何使用数组甚至其他更简单的方法。

我在将单选按钮输入数组数据放入要保存到我的API的postData中时遇到问题

postData是questionid，问题类型和答案

问题：

1。地球平坦吗？真假2.地球是圆的吗？是非题

所以我的输入是这样的单选按钮

handleTF(event) {
 const tfc = event.target.value;
 console.log(event.target.name)
 console.log(tfc);
 this.setState({ [event.target.name]: tfc});
}

const tfcs = ["True", "False"]

{tfcs.map((tfc, index) => (
  <label key={index}>
     {tfc}
       <input
         name={qd.question.id} 
           value={tfc}
           onChange={this.handleTF}
           type="radio"
        />
   </label>
))}

handleSubmitTF(event){
        event.preventDefault();

        const {
            questionId,
            questionType,
            answer
        } = this.state;

        const postData = {

            questionId,
            questionType,
            answer,

        };

        let sessionToken = sessionStorage.getItem('session');
        let sessToken = sessionToken.replace(/"/g, "");

        fetch('sample.net', {

        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'token'
        },
        body: JSON.stringify([postData]),
        })

        .then(response => response.json())
        .then(response => {
            console.log(response.title)
            if(response.title === "Error"){
                this.addNotification('danger', 'Danger', 'Already answered', 'top-right')
            }else{
                this.addNotification('success', 'Success', 'All Data is Saved', 'top-right')
                this.componentDidMount();
            }

        })      
        .catch(err => {

            console.log("fetch error" + err);
        });
    }

答案

似乎您的状态是由：

{ [event.target.name]: "True" | "False" }

但是随后您可以使用：

const {
    questionId,
    questionType,
    answer
} = this.state;

它们与类型/结构不匹配。

我会说您可以直接发送您的州：

const postData = { ...this.state };

否则，如果您需要它作为答案数组。您可以像这样转换它：

const questions = Object.keys(this.state);

const postData = questions.map((question) => ({
  question,
  answer: this.state[name],
}));