Question

我是个新手，由于很多状态需要转换为钩子，有些状态必须更新，所以我陷入了困境，请提供帮助。我需要使用react函数来使用react-redux。

const localizer = momentLocalizer(moment);


class BigCalendar extends Component {

    state = {
        events: [{
            id: 2,
            title: 'DS STARTS',
            start: new Date(2016, 2, 13, 0, 0, 0),
            end: new Date(2016, 2, 20, 0, 0, 0),
        }],


    };

    constructor() {
        super();
        const now = new Date();
    };

    componentDidMount() {

        current().then((data)=>{

        });

        listEvents().then((data) => {


             const events=data;
             this.state = {
                 name: 'React',
                 events,
                 messages: messages,

             };

             this.setState({
                 events:[
                     ...this.state.events,
                     data
                 ]
             })
        });
    }
    handleSelect = ({start, end}) => {
        const title = window.prompt('New Event name');
        if (title) {
            this.setState({
                events: [
                    ...this.state.events,
                    {
                        start,
                        end,
                        title,
                        id: this.id,
                    },
                ],
            });
            createEvent({id: "some id", title: title, start: start, end: end});
        }
    };

    render() {
        return (
            <div>
                <p>
                    A test for the React Big Calendar.
                </p>
                <div style={{height: '500pt'}}>
                    <Calendar
                        events={this.state.events}
                        startAccessor="start"
                        endAccessor="end"
                        selectable
                        onSelectSlot={this.handleSelect}
                        defaultDate={moment().toDate()}
                        localizer={localizer}
                    />
                </div>
            </div>
        );
    }
}
export default BigCalendar;

在bigCalendar中单击后，我需要更新状态。我读了很多文章，但是我不知道要更新的操作系统状态

Answer 1

只要有多个数据需要保持状态，就可以使用多个useState挂钩（每个状态值一个）：

const [id, setId] = useState(2);
const [title, setTitle] = useState('DS STARTS');
// ...

或者您可以使用一个带有对象值的单个对象：

const [event, setEvent] = useState({
  id: 2,
  title: 'DS STARTS',
  // ...

通常来说，前者更好，因为这样，当不相关的数据发生更改时，您就不必不必要地重新呈现。但这仅适用于不相关的数据：如果所有数据在概念上都链接在一起，则将它们保留在同一对象中可能很有意义。

例如，如果您有foo和bar，则子组件A取决于foo，子组件B取决于bar和{{1 }}的更改，foo将被重新渲染（尽管仅在虚拟DOM中，假设它返回相同的JSX）... 如果您对两个对象都使用单个状态对象。如果它们是单独的状态，尽管更新一个不会影响依赖于另一个的组件。

（但同样，如果A和B都同时依赖bar和foo，也就是是否连接了数据，那么这都不重要。）

此外，使用对象值，您可以执行bar ...，而忘记了不会触发重新渲染（您必须执行foo.baz = 5）。非对象没有这个问题。

我个人也觉得使用单独的setFoo({...foo, baz: 5})钩子在人的层面上更干净，因为那样的话，在“每条概念信息一个”的意义上，它确实使“状态变量”更像常规变量。

P.S。如果您有一个复杂的应用程序，则会有很多状态：没有办法“解决”该问题。但是，如果您的问题是必须在组件之间传递许多状态值，那么您应该在React中阅读有关上下文的信息，因为它旨在解决该问题。

如何转换具有许多状态的组件以响应功能

1 个答案: