在渲染函数之前从服务器获取数组有什么好主意吗?

Question

我正在尝试从实时数据库中获取对象，并制作值复选框列表。 它直接将对象替换为 React 子组件的道具，而无需使用 Firebase。 但是，当对象从火库中获取然后替换为道具时，它不起作用。我认为这是由于异步无法正常工作，因为渲染渲染比从 firebase 获取对象更快。

在渲染之前获取对象有什么好主意吗？

谢谢。

火力基地配置

> var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);

使用 Firabase 实时数据库获取对象

function getAllUserData(func){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
let val = firebase.database().ref('users/');
val.once('value', function(snapshot) {
arr2 = Object.entries(Object.assign({},snapshot.val()))
}).then(()=>{
func(arr2);
});
} else {
}
});
}

反应类

class CheckBoxesGroup extends React.Component {
constructor(props){
super(props)
this.state = {randData:this.props.randData}
}
componentWillMount () {
this.selectedCheckboxes = new Set();
}
componentDidMount = ()=>{
const {dispatch} = this.props
getAllUserData(dispatch(setArr))
}
toggleCheckbox = label => {
if (this.selectedCheckboxes.has(label)) {
this.selectedCheckboxes.delete(label);
} else {
this.selectedCheckboxes.add(label);
}
}
handleFormSubmit = formSubmitEvent => {
formSubmitEvent.preventDefault();
for (const checkbox of this.selectedCheckboxes) {
console.log(checkbox, 'is selected.');
}
}
getSelectedCheckbox = ()=>{
}
createCheckbox = array => (
<Checkbox
label={arrayl[1].time}
handleCheckboxChange={this.toggleCheckbox}
key={array[1].value}
money ={array[1].value}
no ={arrayl[1].no}
checked = {this.getSelectedCheckbox.bind(this)}
></Checkbox>
)
createCheckboxes = () => {
const {randData} = this.state
return(randData.map((array)=><Checkbox
label={array[1].time}
handleCheckboxChange={this.toggleCheckbox}
key={array[1].value}
money ={array[1].value}
no ={array[1].no}
checked = {this.getSelectedCheckbox.bind(this)}
></Checkbox>))
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
{this.createCheckboxes()}// CheckBoxes col
</div>
</div>
</div>
);
}
}

class Checkbox extends React.Component {
state = {
isChecked: false,
}
toggleCheckboxChange = () => {
const { handleCheckboxChange, label } = this.props;
this.setState(({ isChecked }) => (
{
isChecked: !isChecked,
}
));
handleCheckboxChange(label);
}
render() {
const { label,no,money} = this.props;
const { isChecked } = this.state;
this.state = {isChecked:false};//
return (
<div className="checkbox">
<label>
<input
type="checkbox"
value={label}
checked={isChecked}
onChange={this.toggleCheckboxChange}
money={money}
/>
{label}
</label>
</div>
);
}
}

反应多姆

ReactDOM.render(
<CheckBoxesGroup randData={arr2}/>
,
document.getElementById('root')
)

Answer 1

不，做你想做的事没有任何好主意。您只能在使用componentWillMount渲染之前启动提取render但该方法不会等待 fetch 完成其工作，无论如何您都会看到一个空数据。这就是为什么您应该像在应用程序中一样使用componentDidMount，因为componentWillMount将被弃用并且对您的情况没有影响

你能做什么？您可以使用条件呈现：

{this.props.randData && this.createCheckboxes()}

另外，不要将道具设置为本地状态。这不是必需的。