如何使用React Hooks渲染不同的组件

Question

我有一个带有if语句的父组件，用于显示两种不同类型的按钮。

在页面加载时，我检查API是否返回一个名为lectures的数组为空或有任何值：

lectures.length > 0 ? show button A : show button B

这是一个名为main.js的组件，其中if语句为：

lectures.length > 0 
? <div onClick={() => handleCollapseClick()}>
<SectionCollapse open={open} />                                         
</div>
: <LectureAdd dataSection={dataSection} />

组件LectureAdd显示一个+符号，它将打开一个模态以创建新的讲座标题，而SectionCollapse将显示一个箭头以显示/隐藏项目列表。

逻辑很简单：
1。在页面加载时，如果lectures.lenght > 0为false，则显示+符号以添加新讲座
OR
2.如果lectures.lenght > 0为true，则更改并显示collpase箭头。

现在，当我添加来自子组件LectureAdd.js 的新讲座时，我的问题就发生了

import React from 'react';
import { Form, Field } from 'react-final-form';
// Constants
import { URLS } from '../../../../constants';
// Helpers & Utils
import api from '../../../../helpers/API';
// Material UI Icons
import AddBoxIcon from '@material-ui/icons/AddBox';

export default ({ s }) => {
const [open, setOpen] = React.useState(false);
const [ lucturesData, setLecturesData ] = React.useState(0);
const { t } = useTranslation();

const handleAddLecture = ({ lecture_title }) => {
const data = {
"lecture": {
"title": lecture_title
}
}
return api
.post(URLS.NEW_COURSE_LECTURE(s.id), data)
.then(data => {
if(data.status === 201) {
setLecturesData(lucturesData + 1) <=== this doesn't trigger the parent and the button remains a `+` symbol, instead of changing because now `lectures.length` is 1 
}
})
.catch(response => {
console.log(response)
});
}

return (
<>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
<AddBoxIcon />
</Button>
<Form 
onSubmit={event => handleAddLecture(event)}
>
{
({ 
handleSubmit
}) => (
<form onSubmit={handleSubmit}>
<Field 
name='lecture_title'
>
{({ input, meta }) => (
<div className={meta.active ? 'active' : ''}>
<input {...input} 
type='text'
className="signup-field-input"
/>
</div>
)}
</Field>
<Button 
variant="contained" 
color="primary"
type="submit"
>
ADD LECTURE
</Button>
</form>
)}
</Form>
</>
)
}

我一直试图使用UseEffect在名为lucturesData的变量更新时触发重新渲染，但它不会重新渲染父组件
知道吗？谢谢Joe

Answer 1

React中的常见问题。自上而下发送数据很容易，我们只需要传递道具。从子组件向上传递信息并不容易。几个解决方案。

1. 使用回调(观察者模式(父对象将道具传递给子对象，该子对象是一个函数。当发生有意义的事情时，Child调用函数。然后，当函数被调用时，父级可以执行一些操作，比如强制重新渲染

function Parent(props) {
const [lectures, setLectures] = useState([]);
const handleLectureCreated = useCallback((lecture) => {
// Force a re-render by calling setState
setLectures([...lectures, lecture]);
}, []);
return (
<Child onLectureCreated={handleLectureCreated} />
)
}
function Child({ onLectureCreated }) {
const handleClick = useCallback(() => {
// Call API
let lecture = callApi();
// Notify parent of event
onLectureCreated(lecture);
}, [onLectureCreated]);
return (
<button onClick={handleClick}>Create Lecture</button>
)
}

2. 类似于解决方案#1，除了父处理API调用。这样做的好处是，Child组件由于"变笨"而变得更加可重用

function Parent(props) {
const [lectures, setLectures] = useState([]);
const handleLectureCreated = useCallback((data) => {
// Call API
let lecture = callApi(data);
// Force a re-render by calling setState
setLectures([...lectures, lecture]);
}, []);
return (
<Child onLectureCreated={handleLectureCreated} />
)
}
function Child({ onLectureCreated }) {
const handleClick = useCallback(() => {
// Create lecture data to send to callback
let lecture = {
formData1: '',
formData2: ''
}
// Notify parent of event
onCreateLecture(lecture);
}, [onCreateLecture]);
return (
<button onClick={handleClick}>Create Lecture</button>
)
}

3. 使用像Redux这样的中央状态管理工具。该解决方案允许任何组件"监听"数据的更改，如新的讲座。我不会在这里提供一个例子，因为它非常深入

本质上，所有这些解决方案都涉及相同的解决方案，执行方式略有不同。第一种是使用智能子级，一旦事件完成，它就会通知其父级。第二，使用哑孩子来收集数据，并通知家长对所述数据采取行动。第三，使用集中的状态管理系统。