Question

我是 React 和 Javascript 的新手，需要一些帮助。我为我的 axios 请求定义了一个单独的 APIcalls 组件。它看起来像：

import axios from 'axios';

...

export function createData(state, callback, errorcallback, baseUrl) {
  axios
    .post(baseUrl, state)
    .then(res => {
      console.log("callback "+callback)
      if (callback != null) {
        callback(res.data);
      }
    })
    .catch(err => {
      if (errorcallback != null) {
        errorcallback(err);
      }
    })
}

然后我有另一个组件，它包含一个表单并且应该设置我的状态。为了创建消息，我首先需要一个日期，所以我必须首先创建一个日期，从创建的日期获取 dateId 并在创建消息之前设置它。所以该消息应该包含一个 FK messageDateId。但 messageDateId 始终未定义。

代码如下：

class MessageForm extends React.Component {

    constructor(props) {
        
...

        this.state = {
            //fields for message
            message: {
                messageDateId: '',
                text: ''
            },

            //fields for messageDate
            messageDate: {
                date: format(new Date(), "yyyy-MM-dd")
            }
        }
    }

    submitHandler = (e) => {
        e.preventDefault()
        createData(this.state.messageDate, (res) => { this.setState({message: { messageDateId: res.id }})}, (err) => { alert(err) }, this.dateUrl);
        createData(this.state.message, null, (err) => { alert(err) }, this.messageUrl)
    }

    dateChangeHandler = (e) => {
        this.setState({messageDate: { [e.target.name]: e.target.date }})
    }

    /*this visually changes the switch from left to right and visa versa */
    toggleSwitch = () => { this.setState({message: { passiveType: !this.state.message.passiveType }}); }

    render() {
        const { text} = this.state.message
        const { date } = this.state.messageDate
        return (
            <div className="createInput">
                <form className="inputfields" onSubmit={this.submitHandler}>
                    <div>
                        <p>Enter text: </p>
                        <textarea id="description" type="text" name="text" value={text} onChange={this.messageChangeHandler}></textarea>
                    </div>
                    <div className="date-picker">
                        <p>Enter the Date: </p>
                        <DateApp name="date" date={date} setDate={this.dateChangeHandler}></DateApp>
                    </div>
                    <button className="createSubmit" type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default MessageForm

React 从其他组件中的 axios 请求获取响应数据

0 个答案: