React中POST数据到SharePoint后无法自动展示，求解决方案

问题核心 #

你遇到的问题是：POST数据到SharePoint后，Feed组件没有自动刷新展示新数据，因为Feed组件的本地state仅在初始化时读取props，后续props更新或新增数据时没有同步更新状态，且POST完成后没有触发数据重新获取或状态更新。

解决方案 #

1. 简化Feed组件，直接依赖props渲染

首先去掉Feed组件中不必要的本地state，直接使用传入的props数据渲染，避免state与props不同步的问题：

function Feed(props) { 
  return (
    <div>
      {props.data.map((item) => {
        const spFormated = Moment(item.fields.Date).format('MM/DD/YYYY');
        if (formated === spFormated ) {
          if(item.fields.Hours <= 2){
            return(
              <React.Fragment key={item.id}>
                <div className="taskcolorback-div" />
                <button className="taskcolor-button" />
                <input className="tasktext-b" defaultValue={Moment(item.fields.Date).format('MM/DD/YYYY')}></input>
                <button className="taskwhite-button" />
                <b className="timeinline">{item.fields.Hours}Hr</b>
                <img className="vector-icon" alt="" src="icons8-chevron-right-64.png" />
              </React.Fragment>
            );
          }
          else if(item.fields.Hours === 3){
            return( 
              <React.Fragment key={item.id}>
                <div className="taskcolorback-div3" />
                <button className="taskcolor-button3" />
                <input className="tasktext-b3" defaultValue={Moment(item.fields.Date).format('MM/DD/YYYY')}></input>
                <button className="taskwhite-button3" />
                <b className="timeinline3">{item.fields.Hours}Hr</b>
                <img className="vector-icon3" alt="" src="icons8-chevron-right-64.png" />
              </React.Fragment>
            );
          }
          else if(item.fields.Hours === 4){
            return(
              <React.Fragment key={item.id}>
                <div className="taskcolorback-div4" />
                <button className="taskcolor-button4" />
                <input className="tasktext-b4" defaultValue={Moment(item.fields.Date).format('MM/DD/YYYY')}></input>
                <button className="taskwhite-button4" />
                <b className="timeinline4">{item.fields.Hours}Hr</b>
                <img className="vector-icon4" alt="" src="icons8-chevron-right-64.png" />
              </React.Fragment>
            );
          }
          else if(item.fields.Hours >= 5){
            return(             
              <React.Fragment key={item.id}>
                <div className="taskcolorback-div5" />
                <button className="taskcolor-button5" />
                <input className="tasktext-b5" defaultValue={Moment(item.fields.Date).format('MM/DD/YYYY')}></input>
                <button className="taskwhite-button5" />
                <b className="timeinline5">{item.fields.Hours}Hr</b>
                <img className="vector-icon5" alt="" src="icons8-chevron-right-64.png" />
              </React.Fragment>
            );
          }
          return(
            <React.Fragment key={item.id}>
              <div className="taskcolorback-div" />
              <button className="taskcolor-button" />
              <input className="tasktext-b" defaultValue={Moment(item.fields.Date).format('MM/DD/YYYY')}></input>
              <button className="taskwhite-button" />
              <b className="timeinline">{item.fields.Hours}Hr</b>
              <img className="vector-icon" alt="" src="icons8-chevron-right-64.png" />
            </React.Fragment>  
          );
        }
        return null; // 不符合条件时返回null，不要返回console.log
      })}
    </div>
  );
}

2. POST完成后更新数据状态

在调用PostData的父组件中，完成POST后要么重新获取最新列表数据，要么直接把新增条目加入现有状态：

方式一：重新请求接口获取最新数据

// 父组件示例
function ParentComponent() {
  const [listData, setListData] = useState([]);
  const accessToken = "你的访问令牌";

  // 初始化获取列表数据
  useEffect(() => {
    fetchListData();
  }, []);

  // 封装获取SharePoint列表数据的函数
  async function fetchListData() {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;
    headers.append("Authorization", bearer);
    
    const response = await fetch(graphConfigh.graphMeEndpointh, {
      method: "GET",
      headers: headers
    });
    const data = await response.json();
    setListData(data.value); // 假设接口返回的数据数组在value字段中
  }

  // 提交数据并更新列表
  async function handleSubmit() {
    await PostData(accessToken);
    // POST成功后重新拉取最新数据
    fetchListData();
  }

  return (
    <div>
      <button onClick={handleSubmit}>提交数据</button>
      <Feed data={listData} />
    </div>
  );
}

方式二：直接将新增条目加入本地状态（无需重新请求）

如果POST接口返回了新增的完整数据，或者你可以构造匹配格式的条目，直接添加到现有状态：

async function handleSubmit() {
  const newItem = {
    id: Date.now(), // 临时id，后续刷新会被接口返回的真实id替换
    fields: {Title: 'TEST',Date: '08/13/2022',Hours:"3"}
  };
  await PostData(accessToken);
  // 直接更新本地状态，触发组件重新渲染
  setListData(prevData => [...prevData, newItem]);
}

关键说明 #

• 不要用本地state缓存props：React中props更新时，useState初始化的值不会自动同步，直接使用props可以避免状态不一致。
• POST后必须触发状态更新：无论是重新请求接口还是本地添加条目，只要更新了Feed组件依赖的data props，React就会自动重新渲染展示新数据。
• 避免无效返回：原代码中return console.log("null")会导致渲染undefined，直接返回null即可。

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