Question

//下面是状态

const [ showDiary, setShowDiary ] = useState({});
const { showContent, showDate, showImages } = showDiary;

//代码以从redux获取数据并更新状态

 const getDiary = (e, id) => {
     const diary = diaries.diaries.find(diary => {
  return diary._id === id
});
console.log(diary);
setShowDiary({  ...showDiary, showContent: diary.content, showDate: diary.date, showImages: diary.images })
  };

//现在在控制台中，我正在获取所有单击的正确数据，但是状态没有更新，并且单击时的数据也没有更新。 //注意：diaries.diaries是存储在redux存储中的数据编辑 //进入Redux商店

const mapStateToProps = state => ({
  diaries: state.diary
})

export default connect(
  mapStateToProps, {
    deleteDiary
  }
) (DiaryItem)

// HTML显示内容的地方

<button className="btn btn-outline-primary" data-toggle='modal' data-target='#fullcontent' onClick={e => getDiary(e, _id)}>View Full</button>
<button className="btn btn-outline-default">Edit</button>
<button className="btn btn-outline-danger" onClick={e => deletes(e, _id)}>Delete</button>

<div className="modal fade" id="fullcontent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div className="modal-dialog" role="document">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel"></h5>
        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body" style={{height: height / 2, overflow: 'scroll'}}>
                  {showContent}
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

//我从哪里获得州的道具

const DiaryItem = ({diary: {date, content, images, _id}, deleteDiary, diaries}) => {

Answer 1

diaries是Promise吗？是否需要为async？我觉得这就是您的问题所在。如果它是一个承诺，我不确定您是否正确解决了它。但是我怀疑它可能不是是一个承诺，在这种情况下，您不需要async？

旁注：如果您使用的是filter，但是只想要第一个元素，则可以使用find：

const diary = diaries.diaries.find(diary => {
  return diary._id === id
});

那么您不必再说diary[0]。

Answer 2

由于您仍在使用hooks，请尝试以下操作。 reduxjs建议您在选择器上使用memoize。 https://github.com/reduxjs/reselect/blob/master/README.md#q-how-do-i-create-a-selector-that-takes-an-argument

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createSelector } from 'reselect';
import { memoize } from "lodash.memoize";

// first, create a selector
const getDiaryById = id => createSelector(
    state => state.diary.diaries,
    diaries => memoize(
        diaryId => diaries.find(item => item.id === diaryId)
    )
);

function App() {
    const [diaryId, setDiaryId] = useState(null);
    const [myDiary, setMyDiary] = useState({});

    useEffect(() => {
        const diary = useSelector(getDiaryById(diaryId));

        // this set function really depends on your use case
        setMyDiary(diary);

    }, [diaryId]); // only run if the diaryId changes

    return (
        <div>
            <label htmlFor="diarySelector">Select A Diary</label>
            <select name="diarySelector" id="diarySelector" onChange={e=> setDiaryId(e.target.value)}>
                <option value="1">1</option>
                <option value="1">2</option>
                <option value="1">3</option>
                <option value="1">4</option>
            </select>

            <pre>{JSON.stringify(myDiary, null, 2)}</pre>
        </div>
    );
}

我试图在单击时从redux存储中加载数据并更新状态，但是在单击时未更新来自状态的数据

2 个答案: