如何触发用户在React中输入的数据的呈现

Question

在这个应用程序中，学生数据是从API中提取的，点击卡片上的PLUS按钮可以为每个学生添加新标签。

问题：标签在输入后不会立即出现在屏幕上。只有在关闭并再次打开下拉菜单后，或者如果连续输入了多个标记，它们才会呈现。

项目和代码可以在这里找到：https://codesandbox.io/s/hatch-frontend-mch-52n67?file=/src/components/views/Card.js:2280-2320

Card.js

// ...
// Submit Handler function:
const submitNewTagHandler = (e) => {
e.preventDefault();
setHasTags(true);
console.log(tags);
setHeightState(
`${content.current.scrollHeight}px`
);
setTags([...tags, newTag]);
updateStudents(tags, index);
setNewTag('');
};

//Tag render:
{hasTags && <Tags student={student} />}
// Tag input:
<form onSubmit={submitNewTagHandler}>
<input
className='​add-tag-input​'
onChange={(e) => setNewTag(e.target.value)}
value={newTag}
type='text'
placeholder='Add a new tag'
/>
</form>

App.js

// updateStudent is called as update in App.js
// (This updates the main data array called students)
const update = (t, index) => {
setTags(t);
setStudents(
students.map((student, i) => {
// console.log(i, index);
if (i === index) {
console.log(student, tags);
return { ...student, tags };
} else {
return student;
}
})
);
console.log(students);
};

Tags.js

const Tags = (props) => {
return (
<div className='tags'>
{props.student.tags.map((tag, index) => {
return (
<h3 className='tag' key={index}>
{tag}{' '}
</h3>
);
})}
</div>
);
};

我已经尝试了不同的方法来使用useEffect来重新渲染标签，但到目前为止还没有成功…

谢谢！

Answer 1

好吧，因为您如何使用本地状态设置NewTags，然后将props传递给Tags，导致同步错误，因为react状态都是异步的。

所以我更新了代码以使用Ref来获取当前值，它应该可以工作。

还有很多变化要做。基本上，您的代码都是一团糟，因为您正在用另一个状态更新状态。(例如，u用新标签更新标签(，但新标签尚未用新值更新。

我还删除了App.js中的useEffect，并向您展示了如何使用Memo。

删除这2行

const [tags, setTags] = useState(student.tags);
const [newTag, setNewTag] = useState('');

创建新的输入参考

const inputRef = useRef()
const formRef = useRef()

更改此的输入

<input
className='​add-tag-input​'
ref = {inputRef} //add this
//value={newTag} remove this
type='text'
placeholder='Add a new tag'
/>

然后您的句柄提交功能

const submitNewTagHandler = (e) => {
const value = inputRef.current.value
e.preventDefault();
setHeightState(
`${content.current.scrollHeight}px`
);
updateStudents([...student.tags, value], index);
formRef.current.reset()
};

然后将该行更改为更新的行。

｛student？.tags？.length>0&&｝

然后你需要用一个键更新你的.map，否则它无法正确渲染。

<Card key={`student-${student.id}`} students={props.students} student={student} index={index} updateStudents={props.updateStudents} />

在您的更新功能中

const update = (t, index) => {
setTags(t);
setStudents((prev) =>
prev.map((student, i) => {
// console.log(i, index);
if (i === index) {
console.log("prev map", student, t);
return { ...student, tags: t };
} else {
return student;
}
})
);
console.log(students);
};

将组件更新到此

const Tags = ({ tags }) => {
return (
<div className="tags">
{tags.map((tag, index) => {
return (
<h3 className="tag" key={`tag-${index}`}>
{tag}{" "}
</h3>
);
})}
</div>
);
};

添加此项可以修复输入隐藏的手风琴。

useEffect(() => {
if (setActive) setHeightState(`${content.current.scrollHeight}px`);
},[props])

做了太多的改变。我可能在这里错过了一些。查看新的沙箱