Javascript ReactJS-Axios不'；t返回数据

我有这段代码可以用Axios获取数据。不幸的是，这段代码不起作用，因为

console.log（响应）未在控制台中记录任何数据。这里怎么了？有什么东西不见了吗

const ROOT_URL = "https://jsonplaceholder.typicode.com";

const getFindAll = (data) => {
  return {
    type: constants.FETCH_FIND_ALL,
    payload: data
  }
}

export const fetchFindAll = () => {
  return (dispatch) => {
    axios({
      method: 'put',
      url: `${ROOT_URL}/posts/1`
    })
      .then(response => {
       console.log(response);
        dispatch(getFindAll(response.data.Body.Message));
      })
      .catch(error => {
        //TODO: handle the error when implemented
      })
  }
}

我正在调用
FileTree
中的
fetchFindAll（）
组件：

export class FileTree extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeNode: null };
    console.log('ldirj', props)

    this.setActiveNode = this.setActiveNode.bind(this);
  }

  setActiveNode(name) {
    this.setState({ activeNode: name });
    this.props.liftStateUp(name);
  }

  componentWillReceiveProps({ searchTerm }) {
    this.setState({ searchTerm });
  }

    renderFindAll () {
      const fetch = this.props.fetchFindAll();
      fetch(this.props.dispatch);
      console.log(fetch);
  }

  componentDidMount () {
    this.renderFindAll();
  }

  render() {
    return (
      <div className="grid__item-50">
        {renderTree(this.props.root, this.setActiveNode, this.state.activeNode, null, this.state.searchTerm)}
      </div>
    );
  }
}

导出类FileTree扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={activeNode:null}；
console.log（'ldirj'，道具）
this.setActiveNode=this.setActiveNode.bind（this）；
}
setActiveNode（名称）{
this.setState（{activeNode:name}）；
此.props.liftStateUp（名称）；
}
componentWillReceiveProps（{searchTerm}）{
this.setState（{searchTerm}）；
}
renderFindAll（）{
const fetch=this.props.fetchFindAll（）；
取（这个。道具。分派）；
console.log（fetch）；
}
组件安装（）{
这个.renderFindAll（）；
}
render（）{
返回(
{renderTree（this.props.root，this.setActiveNode，this.state.activeNode，null，this.state.searchTerm）}
);
}
}

this.props.fetchFindAll（this.state）

调用此函数只返回一个函数（
（dispatch）=>{…}
）（忽略该函数）

您需要调用返回的函数或重写
fetchFindAll
，这样它就完成了
（dispatch）=>{…}
本身的工作

后一个选项可能更好，因为您没有传递任何可能要关闭的变量。
调用
fetchFindAll（）
将为您提供一个关闭函数

要真正触发请求，需要使用
fetchFindAll（）（dispatch）

fetchFindAll
不接受任何参数，因此，将
this.state
传递给它不会有任何区别

此外，多次调用
fetchFindAll
将提供多个闭包函数

总之，您应该这样做：

renderFindAll () {
  const fetch = this.props.fetchFindAll();
  fetch(this.props.dispatch); // assuming you are using react-redux
}

----编辑----

尝试实现组件didmount

：

componentDidMount () {
  this.renderFindAll();
}

---

好吧，听起来像是一些react/react redux的东西把你绊倒了。我有一些时间，所以我继续并在这里模拟了这可能如何一起工作：

（我没有设置任何还原器/状态变量-您应该在devtools-console中看到响应）

我尽量不去详细介绍你在文档中可以找到的信息（这是一个非常棒的资源，还有你可以在那里找到的链接教程）

Redux文档：

如果您在理解react组件体系结构方面有困难，react文档和教程也很丰富。我想你已经在看这些了

Redux功能非常强大，但可能会有点混乱，因此我将尝试在您提供的代码中详细说明我注意到的内容（请记住，您可能知道其中一些内容，但可能没有将它们包含在您的代码中）

1:

dispatch

需要从某处发出，react redux提供

connect

（）：

2：您的操作也应该导入到以下位置：

import { fetchFindAll } from "../actions";

// ...

renderFindAll() {
    const fetch = fetchFindAll();
    fetch(this.props.dispatch);
    console.log(fetch);
}

3：对于大多数组件，您希望导出默认值，具体取决于您计划导入的方式

4：一般来说，您可以在这里使用put方法，但您可能更希望使用

axios.get（'${URL}'）

5：查看您获得的响应数据（使用put请求）：

response.data

的内部是

{id:1}

所以调用

response.data.Body.Message

将出错。很可能您希望在此处使用get请求，该请求将提供以下内容：

它仍然没有响应.data.Body.Message，但这可能更接近您的预期

---

好的，真的希望这有帮助！祝你好运

将

//TODO:在实现时处理错误

替换为在控制台处理错误OK的内容。它可能不会记录数据，但可能会记录一些其他错误消息。请查看浏览器的“开发人员工具”中的“网络”选项卡。请求是否已发送？请求的格式是否符合您的预期？它得到回应了吗？响应是否是您所期望的？@Quentin我检查了“网络”选项卡，没有发现与我尝试执行的请求相关的任何内容。@Quentin和我没有发现错误：/I我调用了返回的函数，但它仍然没有返回任何数据@Quentina根据您最近的编辑，您现在甚至不调用

fetchFindAll

，更不用说对其返回值做任何操作了。这意味着我没有完全理解您的答案。很抱歉，我已经用你的解决方案更新了代码，但不幸的是，它仍然不起作用@但是是的，我正在使用

react-redux

@如果不应该将

renderFindAll

放在

render

中，您只是将其呈现给DOM，而不是调用它。如果您希望在呈现组件时立即触发它，则需要在

FileTree

中实现

componentDidMount

。您是对的

renderFindAll

inside

render（）

仅用于测试。即使如此，

console.log（response）

inside

fetchFindAll（）

甚至没有日志记录。这意味着axios没有得到任何东西，对吗@Kitt该请求不会出现在开发工具的“网络”选项卡中@配套元件

import { fetchFindAll } from "../actions";

// ...

renderFindAll() {
    const fetch = fetchFindAll();
    fetch(this.props.dispatch);
    console.log(fetch);
}