Не удается отправить данные обратно в React

#javascript #node.js #reactjs #express #react-router

#javascript #node.js #reactjs #экспресс #react-маршрутизатор

Вопрос:

Я новичок в React и Node js. Я определил функцию, которая запускает скрипт Python из моего Node.js приложение, использующее дочерний процесс, и у меня есть сообщение маршрутизатора, которое вызывало pythonExecute и возвращало этот результат обратно в React. У маршрутизатора, похоже, возникли проблемы с отправкой данных обратно в react с помощью react.json(data) , может кто-нибудь, пожалуйста, помогите и посмотрите, что я сделал не так и как это исправить?

Функция

 const pythonExecute = (data, input) => {
    const res = {
      err: false,
      msg: ""
    }
    return new Promise((resolve, reject)=>{
        const fileName = "test.py"
        saveFile(fileName, data)
          .then(()=>{
              const filePath = path.join(__dirname,"../test.py")
              const spawn = require("child_process").spawn;
              const pythonProcess = spawn('python',[filePath]);   
              pythonProcess.stdout.on('data', (data) => {
                console.log(data.toString());
                resolve(data)
            });
          })
          .catch(()=>{
            console.log("ERROR SAVE FILE"  saveFileRes)
            const err = {
              err: true,
              output: "Internal Server Error!"
            }
            resolve(err)
          })
    })
 

Экспресс-маршрутизатор

 const execute = require('../../compile/compile')
router.post('/submit', (req,res)=>{
    console.log(req.body)
    const code = req.body.code
    const input = req.body.input
    const lang = req.body.lang
    return execute.pythonExecute(code, input)
    .then(data=>{
    console.log("SUCCESSFULL PROMISE "   data)
    console.log("SENDING "   data)
    res.write(data)
    deleteFile(path.join(__dirname, '../../test.py'))
    })
    .catch(err => {
    console.log("ERROR PROMISE "   err)
    deleteFile(path.join(__dirname, '../../test.py'))
})
    }  
)
 

Реагировать

 export default class Ide extends Component {
    state={
        code: code.cpp,
        result: 'Submit Code to See Result',
        lang: 'cpp'
    }

    onSubmitHandler = (e) => {
        e.preventDefault()
        alert("submit code")
        axios.post(`${secret.url}code/submit`,this.state)
            .then(res=>{
                console.log(res.data)
                const data = res.data
                if(data.err){
                    // Error in user code
                    this.setState({
                        result: data.error
                    })
                }else{
                    this.setState({
                        result: data.output
                    })
                }

            })
            .catch(err=>{
                console.log(err)
            })
    }
 

Журналы

 Server started at port 8000
{
  code: '# Your code will come herenprint("b")',
  result: 'Submit Code to See Result',
  lang: 'python'
}
SAVING FILES
The file was saved!
FILE PATH >> ide-servertest.py
[6 7 8]

SUCCESSFULL PROMISE [6 7 8]

SENDING [6 7 8]

File deleted!
SORRY NOT DELETED
File deleted!
File deleted!
 

Комментарии:

1. выводит ли console.log(res.data) { code: ‘# Ваш код придет сюда nprint(«b»)’, результат: ‘Отправить код, чтобы увидеть результат’, язык: ‘python’ }?

Ответ №1:

если вы хотите отправить JSON структуру в приложение react, попробуйте сделать это на сервере:

 res.send(JSON.stringify(data)) 
 

данные должны быть похожи на {значения: [6, 7, 8]} или что-то еще

на клиенте:

 axios.post(`${secret.url}code/submit`,this.state)
  .then(res=> res.json())               
  .then(result => console.log(result))
  ...            
 

если вы хотите отправить plain text :

 res.send(data) 
 

на клиенте:

 axios.post(`${secret.url}code/submit`,this.state)
  .then(res=> res.text())               
  .then(result => console.log(result))
  ...            
 

И не забудьте использовать res.end() после res.write() ;