我有一个接受名为 selectedFields 的道具的子组件。 selectedFields 是一个对象，其中包含填充此可拖动列表组件中的字段所需的数据。
这个组件是一个更大的表单（父组件）的一部分。该组件还取决于先前的选择。如果之前的选择发生变化，父组件会更新 console.log(this.state)。
在这个子组件中，我可以使用 console.log(this.state) 并看到我有正确的数据被传递到组件中。但是，此子组件不会重新渲染。我可以通过更改表单中的先前选择来强制重新渲染，但看起来我总是落后于一个重新渲染。
我认为组件应该在其 props 更新时重新渲染。是不是因为我传入的道具是一个对象而重新渲染？太奇怪了，我可以传入正确的数据，甚至 import React from 'react';
import '@atlaskit/css-reset';
import styled from 'styled-components';
import { DragDropContext } from 'react-beautiful-dnd';
import Column from './column';
// import { initialData } from './initial-data'
const Container = styled.div`
display: flex;
`;
class SelectFields extends React.Component {
state = this.props.selectedFields;
onDragEnd = result => {
const { destination, source, draggableId } = result;
if (!destination) {
return;
}
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
) {
return;
}
const start = this.state.columns[source.droppableId];
const finish = this.state.columns[destination.droppableId];
if (start === finish) {
const newfieldIds = Array.from(start.fieldIds);
newfieldIds.splice(source.index, 1);
newfieldIds.splice(destination.index, 0, draggableId);
const newColumn = {
...start,
fieldIds: newfieldIds,
};
const newState = {
...this.state,
columns: {
...this.state.columns,
[newColumn.id]: newColumn,
},
};
this.setState(newState);
return;
}
// Moving from one list to another
const startfieldIds = Array.from(start.fieldIds);
startfieldIds.splice(source.index, 1);
const newStart = {
...start,
fieldIds: startfieldIds,
};
const finishfieldIds = Array.from(finish.fieldIds);
finishfieldIds.splice(destination.index, 0, draggableId);
const newFinish = {
...finish,
fieldIds: finishfieldIds,
};
const newState = {
...this.state,
columns: {
...this.state.columns,
[newStart.id]: newStart,
[newFinish.id]: newFinish,
},
};
this.setState(newState);
};
render() {
console.log(this.state)
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Container>
{(this.state.columnOrder.map(columnId => {
const column = this.state.columns[columnId];
const fields = column.fieldIds.map(
fieldId => this.state.fields[fieldId],
);
return <Column key={column.id} column={column} fields={fields} />;
}))}
</Container>
</DragDropContext>
);
}
}
export default SelectFields
以查看组件可以访问正确的数据，但它仍然没有重新渲染。
model = Sequential()