例如，下面的一个在redux中没有任何问题。
<Input type="textarea" value={this.props.description}
onChange={this.descriptionChange}/>
但是，在'props.permissions'改变之后，这个永远不会被渲染。肯定Chrome中的redux util表示'props.permissions'已经改变。
</tr>
</thead>
<tbody> {
this.props.permissions.map((permission, i) => (
<tr className={'text-center'} key={i}>
<td>
<Input type={"checkbox"}/>
</td>
<td>
<div> {permission.id}</div>
</td>
<td>
<div>{permission.module_value}</div>
</td>
<td>
<div>{permission.name}</div>
</td>
<td>
<div>{permission.uri}</div>
</td>
<td>
<div>{permission.description}</div>
</td>
</tr>
))
}
我知道如果我使用'setState'而不是'redux'，地图功能会重新渲染屏幕。
这里还有完整的代码。
import React, {Component} from 'react';
import {Route, Link} from 'react-router-dom';
import {
Table,
Pagination,
PaginationItem,
PaginationLink,
Row,
Col,
Form,
FormGroup,
Label,
Collapse,
Card,
CardHeader,
CardBody,
TabContent,
TabPane,
DropdownToggle,
DropdownMenu,
DropdownItem,
Button,
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
InputGroupButtonDropdown
} from 'reactstrap';
import Axios from 'axios';
import {connect} from 'react-redux';
import {FIELD_GROUP_PERMISSION, FIELD_PERMISSION_LISTS} from '../../../../../actions/permission';
class Register extends Component {
constructor(props) {
super(props);
this.state = {
pSelected: [],
splitButtonOpen: false,
isOpen: false,
collapse: true,
listDate: [
{listName: "abc"},
{listName: "qed"}
],
listModule: [
{item: "default1"},
{item: "default2"},
{item: "default3"},
],
listCounter: [
{counter: 100},
{counter: 500},
{counter: 1000},
]
,
permissions: [
],
moduleList: [
{
name: "모두",
value: 'all',
},
{
name: "웹",
value: 'web',
},
{
name: "네이티브",
value: 'native'
}
]
}
this.moduleChange = ev => this.props.moduleChange(ev.target.value);
this.nameChange = ev => this.props.nameChange(ev.target.value);
this.descriptionChange = ev => this.props.descriptionChange(ev.target.value);
this.doRegister = this.doRegister.bind(this);
}
render() {
return (
<div className={'bg-light'}>
<Card>
<CardHeader className={'font-weight-bold'}>그룹 권한 등록</CardHeader>
<CardBody>
<Form>
<FormGroup row>
<Label for={"selectModule"} sm={2}>Module Select</Label>
<Col sm={10}>
<select onChange={this.moduleChange} value={this.props.module}
id="pageCounter">
{this.state.moduleList.map((module, i) => (
<option key={i}
value={module.value}
>{module.name}</option>
))}
</select>
</Col>
</FormGroup>
<FormGroup>
<Label for={"gName"}>Group Name</Label>
<Input type={"text"} name={"gName"} id={"gName"}
placeholder={"Input Group Name...."} value={this.props.name}
onChange={this.nameChange}/>
</FormGroup>
<FormGroup>
<Label for={"gDesc"}>Group Desc</Label>
<Input type={"textarea"} name={"gDesc"} id={"gDesc"} value={this.props.description}
onChange={this.descriptionChange}/>
</FormGroup>
<FormGroup>
<div>
<Table hover responsive
className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr className={'text-center'}>
<th>
<InputGroup>
<InputGroupAddon addonType={"prepend"}>
<InputGroupText>
<Input addon type={"checkbox"}
className={"bg-light"}/>
</InputGroupText>
</InputGroupAddon>
<span>Select</span>
</InputGroup>
</th>
<th>ID</th>
<th>Module</th>
<th>Name</th>
<th>Uri</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{
this.props.permissions.map((permission, i) => (
<tr className={'text-center'} key={i}>
<td>
<Input type={"checkbox"}/>
</td>
<td>
<div> {permission.id}</div>
</td>
<td>
<div>{permission.module_value}</div>
</td>
<td>
<div>{permission.name}</div>
</td>
<td>
<div>{permission.uri}</div>
</td>
<td>
<div>{permission.description}</div>
</td>
</tr>
))
}
</tbody>
</Table>
<nav className={"mt-3 w-100"}>
<Pagination className={"justify-content-end"}>
<PaginationItem disabled>
<PaginationLink previous href="#"/>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#"/>
</PaginationItem>
</Pagination>
</nav>
</div>
</FormGroup>
<FormGroup className={'float-right'}>
<Button color={'danger'} className={'float-right'} onClick={this.doRegister}>등록</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</div>
);
}
componentWillMount() {
Axios.get('/api/indexPermissions?module=' + this.state.moduleList[0].value).then(response => {
if (response.data.success === 1) {
this.props.permissionsChange(response.data.permissions);
this.forceUpdate();
}
}).catch(error => {
console.log(error);
alert(error);
});
}
componentWillReceiveProps(nextProps) {
/* if (nextProps['permissions'] !== this.props.permissions) {
this.props.permissionsChange(response.data.permissions);
}*/
/*
console.log(nextProps);
if (this.props.permissions) {
console.log(nextProps);
if (nextProps.permissions !== this.permissions) {
alert('aaa');
}
}
*/
}
doRegister() {
console.log(this.props);
}
}
Register.defaultProps = {
permissions: []
};
/* reducer, redux */
let mapStateToProps = (state) => {
return {
...state
};
}
let mapDispatchToProps = (dispatch) => {
return {
moduleChange: (module) => {
dispatch({type: FIELD_GROUP_PERMISSION, key: 'module', value: module})
},
nameChange: (name) => {
dispatch({type: FIELD_GROUP_PERMISSION, key: 'name', value: name})
},
descriptionChange: (description) => {
dispatch({type: FIELD_GROUP_PERMISSION, key: 'description', value: description})
},
permissionsChange: (permissions) => {
dispatch({type: FIELD_PERMISSION_LISTS, key: 'permissions', value: permissions})
}
}
}
Register = connect(mapStateToProps, mapDispatchToProps)(Register);
export default Register;
以下是Redux代码。
import { FIELD_GROUP_PERMISSION, FIELD_PERMISSION_LISTS } from '../../actions/permission';
export default (state = {}, action) => {
switch(action.type) {
case FIELD_GROUP_PERMISSION:
return { ...state, [action.key]: action.value };
case FIELD_PERMISSION_LISTS:
return { ...state, [action.key]: action.value };
default:
return state;
}
}