Question

我是新来的反应者，我遇到了多个渲染问题，我只是想知道我是否做对了，所以我在列表组件中派出了一个动作来获取笔记列表，看起来像现在：

import React, {useState, useEffect} from 'react';

export default function NoteList (props){


const [ noteList, updateNoteList ] = useState([]);

useEffect(()=>{
    updateNoteList(
        props.noteList.map(note => {
            return {...note, mode : 'title-mode'};
        })
    )
},[props.noteList])



console.log(noteList);
return (
    <div>

    Notes come here

    </div>
  )

}

这个组件被连接到另一个容器类中，但是这是无关紧要的，所以发生了什么，这个组件渲染了4次，两次没有useEffect钩子，还有两次，我想要实现的是我需要在其中添加一个项目每个注释的对象（即mode：title-mode）在此组件的状态下均可与此代码配合使用，关于为什么要在此状态下添加此模式的原因是我想在note数组中更改此模式因此我可以更改每个便笺的查看模式，但是该组件会渲染4次，正如我提到的那样，在我看来，这绝对不是正确的方法。

如果有时间请帮助。

Answer 1

我们可以通过在<Note />组件中自行设置显示模式状态来实现注释列表的显示，因此更改模式不会影响其他注释，这样我们就不必再进行其他操作了。渲染，也可以使用这种方法在不将笔记发送到商店的情况下，在本地修改笔记，然后我们可以在最后通过获得perfs来更新商店。所以基本上这是方法（codesandbox）：

const Note = ({ title, content }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div
      style={{ border: "1px solid", margin: 5 }}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {!isExpanded ? (
        <div>
          <h2>{title}</h2>
        </div>
      ) : (
        <div>
          <h2>{title}</h2>
          <p>{content}</p>
        </div>
      )}
    </div>
  );
};

function App() {
  // this is the notes state, it could be coming from redux store so
  // we could interact with it (modifying it if we need)
  const [notes, setNotes] = React.useState([
    { id: 1, title: "note 1", content: "this is note 1" },
    { id: 2, title: "note 2", content: "this is note 2" }
  ]);

  return (
    <div className="App">
      {notes.map((note) => (
        <Note key={note.id} {...note} />
      ))}
    </div>
  );
}

反应redux saga多个渲染器

1 个答案: