如何将Axios POST响应的response.data.result渲染至其他JS文件的UI文本元素

要实现将Axios请求返回的response.data.result渲染到另一个组件的UI中，推荐两种React原生方案：

方法一：状态提升（最直接的方案） #

由于请求组件（RecorderControls）和目标页面同属一个父组件管辖，通过状态提升共享数据是最直接的方式：

1. 在目标页面父组件中添加状态
   修改目标页面代码，新增存储请求结果的状态，并将更新方法传递给请求组件：

import { useState } from 'react';

export default function TargetPage() {
  const [recorderState, setRecorderState] = useState(/* 你的初始状态值 */);
  const [audioResult, setAudioResult] = useState(''); // 新增状态存储请求结果
  const handlers = { /* 你的原有handler逻辑 */ };

  return (
    <View style={styles.container}>
      <div className="recorder-container">
        <RecorderControls 
          recorderState={recorderState} 
          handlers={handlers} 
          setAudioResult={setAudioResult} // 传递状态更新方法
        />
        <RecordingsList audio={audio} />
        {/* 添加UI元素渲染请求结果 */}
        <div className="result-display">{audioResult}</div>
      </div>
    </View>
  );
}

2. 在请求组件中更新父组件状态
   修改Axios请求的回调逻辑，调用父组件传来的setAudioResult更新状态：

// RecorderControls组件内部的setRecorderState逻辑
setRecorderState((prevState) => {
  let url = window.URL.createObjectURL(blob);
  let formData = new FormData();
  formData.append("file_from_react", blob, "1.wav");
  
  axios
    .post("http://192.168.0.112:5000/profile", formData, {
      headers: { "Content-Type": "multipart/form-data" },
    })
    .then((response) => {
      console.log("response: " + response.data.result);
      // 调用父组件方法更新结果状态
      props.setAudioResult(response.data.result);
    })
    .catch((error) => {
      if (error.response) {
        console.log(error.response);
        console.log(error.response.status);
        console.log(error.response.headers);
      }
    });
  
  return prevState.mediaRecorder 
    ? { ...initialState, audio: url } 
    : initialState;
});

方法二：Context API（适合复杂组件层级） #

如果组件层级较深，状态提升需要层层传递props过于繁琐，可以用React Context实现全局状态共享：

1. 创建共享Context
   新建AudioResultContext.js文件：

import { createContext, useState, useContext } from 'react';

const AudioResultContext = createContext();

export function AudioResultProvider({ children }) {
  const [audioResult, setAudioResult] = useState('');
  return (
    <AudioResultContext.Provider value={{ audioResult, setAudioResult }}>
      {children}
    </AudioResultContext.Provider>
  );
}

export function useAudioResult() {
  return useContext(AudioResultContext);
}

2. 在根组件中包裹Provider

import { AudioResultProvider } from './AudioResultContext';

function App() {
  return (
    <AudioResultProvider>
      {/* 你的路由或目标页面组件 */}
      <TargetPage />
    </AudioResultProvider>
  );
}

3. 在请求组件中更新状态

import { useAudioResult } from './AudioResultContext';

// RecorderControls组件内部
const { setAudioResult } = useAudioResult();

setRecorderState((prevState) => {
  // ...原有请求逻辑
  axios.post(/* ... */)
    .then((response) => {
      setAudioResult(response.data.result);
    })
    // ...catch逻辑
});

4. 在目标页面中渲染结果

import { useAudioResult } from './AudioResultContext';

export default function TargetPage() {
  const { audioResult } = useAudioResult();
  
  return (
    <View style={styles.container}>
      <div className="recorder-container">
        {/* ...原有组件 */}
        <div className="result-display">{audioResult}</div>
      </div>
    </View>
  );
}

内容的提问来源于stack exchange，提问作者VladH