React不在redux存储更改时重新呈现映射函数(使用MaterializeCs选择选项)

Question

React在redux状态更改时不重新渲染。

当我进入这个页面时，最初redux商店"客户"是空的。它获取数据，redux被更新，但没有被重新呈现的部分代码是select选项。。，它只保留">加载"选项，尽管redux存储正在更新。

这是相关代码，尽我所能简化。。

class AddLoad extends Component {
render(){
const customers = this.props.customers
return(  
<Field>
<option value="" disabled selected>State</option>
{customers.length !== 0 ? (
<option>Loading..</option>
) : (
customers.map(customer => {
return (
<option key={customer.id} value={customer.id}>
{customer.customer_name}
</option>
);
})
)}
</Field>
)}
}
function mapStatetoProps(state) {
return {
customers: state.customers.customers,
};
}
export default reduxForm({
form: "PostsNewForm"
})(
connect(
mapStatetoProps,
{ createLoad, fetchCustomers }
)(AddLoad)
);

我在返回中只使用了一个简单的h1标记进行了测试，出于某种原因，这很好，但映射不会再次发生吗？

<h1>{customers.length !== 0 ? customers[0].customer_name : "Testing"}</h1>

编辑：除了客户的逻辑错误。长度。我没有提到我正在使用MaterializeCss来进行此选择选项，最终，逻辑修复+组件DidUpdate来重新初始化Materialize修复了此问题。

Answer 1

检查您的逻辑。

您已经对进行了编码

{customers.length !== 0 ? (<option>Loading..</option>

这意味着，如果长度大于零，则表示正在渲染Loading。它一定是类似的东西

render(){
const customers = this.props.customers
if(!customers.length){
return Loading
}
return(  
<Field>
<option value="" disabled selected>State</option>
customers.map(customer => {
return (
<option key={customer.id} value={customer.id}>
{customer.customer_name}
</option>
);
})
)}
</Field>
)}

如果要将加载呈现为字段选项，只需更改条件即可。希望能帮助你