使用Facebook Graph API在React应用中向用户Facebook主页发帖异常问题

核心错误点 #

• 调用的Facebook Graph API接口错误：发布个人主页帖文需要调用/me/feed接口的POST方法，你当前调用的/me接口仅用于获取/更新用户基本信息，自然不会返回帖文相关数据。同时fields参数仅用于GET请求指定返回字段，POST发帖请求无需传入该参数。
• 编辑器内容获取逻辑错误：你在组件初始化阶段就通过jQuery获取DOM节点内容，此时编辑器还未完成渲染，且用户后续输入的内容不会同步更新到全局message变量，提交的永远是初始空值。DevExtreme的HtmlEditor组件应使用受控模式通过state管理内容，不要直接操作DOM。
• 回调函数逻辑无效：你在回调中往response.posts.data手动插入内容仅修改了本地的响应对象，不会同步到Facebook服务器，属于无效操作。
• 权限缺失前置校验：发帖需要用户授权对应发布权限，未提前申请权限、用户未授权的情况下接口会静默失败或返回权限错误。

修正后代码 #

/*global FB*/
import React from 'react';
import HtmlEditor, { Toolbar, MediaResizing, Item } from 'devextreme-react/html-editor';
import Button from 'react-bootstrap/Button'

const headerValues = [false, 1, 2, 3, 4, 5];

class Poster extends React.Component {
  constructor() {
    super();
    this.state = {
      isMultiline: true,
      editorContent: '' // 用state存储编辑器内容
    };
    // 绑定事件处理函数this指向
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.postSubmit = this.postSubmit.bind(this);
  }

  // 编辑器内容变化时更新state
  handleEditorChange(e) {
    this.setState({
      editorContent: e.value
    })
  }

  // 提交发帖逻辑
  postSubmit() {
    const { editorContent } = this.state;
    if (!editorContent.trim()) return; // 空内容不提交
    FB.api(
      '/me/feed', // 正确的发帖接口
      'POST',
      { "message": editorContent },
      function(response) {
        // 正常返回会带有post_id字段，可在此处做成功提示
        if (response && !response.error) {
          console.log('发帖成功，帖文ID：', response.post_id)
        } else {
          console.error('发帖失败：', response.error)
        }
      }
    );
  }
  
  render() {
    return (
      <div className="widget-container">
        <HtmlEditor
          height="500px"
          width="500px"
          value={this.state.editorContent} // 受控绑定state
          onValueChanged={this.handleEditorChange} // 监听内容变化
        >
          <MediaResizing enabled={true} />
          <Toolbar>
            <Item name="undo" />
            <Item name="redo" />
            <Item name="separator" />
            <Item
              name="header"
              acceptedValues={headerValues}
            />
            <Item name="separator" />
            <Item name="bold" />
            <Item name="italic" />
            <Item name="strike" />
            <Item name="underline" />
            <Item name="separator" />
            <Item name="alignLeft" />
            <Item name="alignCenter" />
            <Item name="alignRight" />
            <Item name="alignJustify" />
            <Item name="separator" />
            <Item
              widget="dxButton"
              options={this.toolbarButtonOptions}
            />
          </Toolbar>
        </HtmlEditor>
        <Button onClick={this.postSubmit}>Click To Submit</Button>
      </div>
      
    );
  }
}

export default Poster;

额外注意事项 #

• 请确保Facebook SDK初始化完成后再调用FB.api方法，避免出现未定义错误
• 发帖前需检查用户已授权发布权限，未授权的情况下先发起权限申请流程
• 新版Facebook Graph API已不再支持第三方应用发布内容到普通用户个人时间线，仅支持发布到公共主页，若你需要发布到个人主页需调整需求为公共主页发布，替换接口为/{page_id}/feed并获取对应公共主页的发布权限
• 相关功能需要先在Facebook for Developers后台完成应用审核，未审核的应用仅能在测试账号下使用该功能

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