Reactjs 添加项目后，页面不会更新

我是新来的，刚开始学习反应。我遇到了这样一个问题：当我添加一个元素时，我不会重载整个列表。虽然更新和删除工作正常，但更改会立即被覆盖。重新加载页面后，列表中会出现一个新项目

事实证明，当我挂载组件并将其拉出时，我会得到一个列表，当我添加一个新元素时，状态并没有意识到它的变化。可能您需要立即将fetchNotes（）带给我的信息转移到状态。如何正确创建它，请告诉我，我已经尝试过使用willMount（）并进行各种操作，但是我要么设法填充状态，要么就不使用this.state.map（）或任何其他胡说八道。。。 我添加项目的方法：

class Note extends Component {
  state = {
    text: "",
    updateNoteId: null,
  };

  componentDidMount() {
    this.props.fetchNotes();
  };

 resetForm = () => {
   this.setState({text: "", updateNoteId: null});
 };

 selectForEdit = (id) => {
    let note = this.props.notes[id];
    this.setState({text: note.text, updateNoteId: id});
 };

 submitNote = (e) => {
   e.preventDefault();
   if (this.state.updateNoteId === null) {
     this.props.addNote(this.state.text).then(this.resetForm);
   } else {
     this.props.updateNote(this.state.updateNoteId, 
     this.state.text).then(this.resetForm);
   }
   this.resetForm();
};

  render() {
    return (
      <div>
        <div style={{textAlign: "right"}}>
           {this.props.user.username} (<a onClick={this.props.logout}>logout</a>)
        </div>
      <h3>Add new note</h3>
      <form onSubmit={this.submitNote}>
         <input
           value={this.state.text}
           placeholder="Enter note here..."
           onChange={(e) => this.setState({text: e.target.value})}
           required />
         <input type="submit" value="Save Note" />
      </form>
      <button onClick={this.resetForm}>Reset</button>

      <h3>Notes</h3>
      <table>
      <tbody>
        {this.props.notes.map((note, id) => (
          <tr key={`note_${id}`}>
            <td>{note.text}</td>
            <td><button onClick={() => this.selectForEdit(id)}>edit</button></td>
            <td><button onClick={() => this.props.deleteNote(id)}>delete</button></td>
          </tr>
        ))}
      </tbody>
      </table>
     </div>
     )
  }
}

const mapStateToProps = state => {
  return {
    notes: state.notes,
    user: state.auth.user,
  }
};

const mapDispatchToProps = dispatch => {
  return {
     fetchNotes: () => {
       dispatch(notes.fetchNotes());
     },
     addNote: (text) => {
        return dispatch(notes.addNote(text));
     },
     updateNote: (id, text) => {
       return dispatch(notes.updateNote(id, text));
     },
     deleteNote: (id) => {
       dispatch(notes.deleteNote(id));
     },
     logout: () => dispatch(auth.logout()),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Note);

行动

export const fetchNotes = () => {
  return (dispatch, getState) => {
    let headers = {"Content-Type": "application/json"};
    let {token} = getState().auth;

    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }

    return fetch("/api/notes/", {headers, })
      .then(res => {
        if (res.status < 500) {
          return res.json().then(data => {
           return {status: res.status, data};
        })
      } else {
        console.log("Server Error!");
        throw res;
      }
    })
  .then(res => {
    if (res.status === 200) {
      return dispatch({type: 'FETCH_NOTES', notes: res.data});
    } else if (res.status === 401 || res.status === 403) {
      dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
      throw res.data;
    }
  })
 }
};

export const addNote = text => {
  return (dispatch, getState) => {
    let headers = {"Content-Type": "application/json"};
    let {token} = getState().auth;

    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }

    let body = JSON.stringify({text, });
      return fetch("/api/notes/", {headers, method: "POST", body})
        .then(res => {
          if (res.status < 500) {
            return res.json().then(data => {
              return {status: res.status, data};
            })
          } else {
             console.log("Server Error!");
             throw res;
          }
      })
  .then(res => {
    if (res.status === 201) {
      return dispatch({type: 'ADD_NOTE', note: res.data});
    } else if (res.status === 401 || res.status === 403) {
      dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
      throw res.data;
    }
  })
  }
 };

export const fetchNotes=（）=>{
返回（调度，获取状态）=>{
let headers={“Content Type”：“application/json”}；
让{token}=getState（）.auth；
如果（令牌）{
标题[“授权”]=`Token${Token}`；
}
返回fetch（“/api/notes/”，{headers，}）
。然后（res=>{
如果（分辨率状态<500）{
返回res.json（）.then（数据=>{
返回{status:res.status，data}；
})
}否则{
log（“服务器错误！”）；
投掷物；
}
})
。然后（res=>{
如果（资源状态===200）{
返回分派（{type:'FETCH_NOTES'，NOTES:res.data}）；
}else if（res.status==401 | | res.status==403）{
分派（{type:“AUTHENTICATION_ERROR”，data:res.data}）；
抛出分辨率数据；
}
})
}
};
export const addNote=text=>{
返回（调度，获取状态）=>{
let headers={“Content Type”：“application/json”}；
让{token}=getState（）.auth；
如果（令牌）{
标题[“授权”]=`Token${Token}`；
}
让body=JSON.stringify（{text，}）；
返回fetch（“/api/notes/”，{headers，方法：“POST”，body}）
。然后（res=>{
如果（分辨率状态<500）{
返回res.json（）.then（数据=>{
返回{status:res.status，data}；
})
}否则{
log（“服务器错误！”）；
投掷物；
}
})
。然后（res=>{
if（res.status==201）{
返回分派（{type:'ADD_NOTE'，NOTE:res.data}）；
}else if（res.status==401 | | res.status==403）{
分派（{type:“AUTHENTICATION_ERROR”，data:res.data}）；
抛出分辨率数据；
}
})
}
};

我认为我应该以某种方式调用setState以明确指示更改，或者可能需要在初始化组件时重新创建后端请求

---

我很乐意接受你方的任何提示和帮助。提前谢谢你

您应按如下方式更改大小写：

case 'ADD_NOTE':
  return {
          ...state,
          noteList:[action.note,...state.noteList]
         }

---

你能提供你的组件的完整代码吗？包括呈现和到redux存储的连接。抱歉，添加了组件的完整代码）正如您所说的“页面重新加载后列表中会出现一个新项目”，这意味着请求已发送到API并成功执行。问题可能来自

减速器
。因此，请在定义用于添加note.ok的减速机的位置提供代码，操作tooIs
res.data
addNote中的数组？谢谢，但我得到了一个错误：
Unhandled Rejection（TypeError）：无法将未定义或null转换为object
我发现的方法是：返回noteList.push（action.note）；事实上，我不确定这是不是正确的方法，我也不明白为什么我返回了一个错误，你的答案看起来是正确的。尽管如此，他还是帮助了我，至少在我必须修理它的地方。
case 'ADD_NOTE':
  return {
          ...state,
          noteList:[action.note,...state.noteList]
         }