如何觸發用戶在 React 中輸入的數據的呈現？

Question

在這個應用程序中，學生數據是從 API 中提取的，可以通過單擊卡片上的加號按鈕為每個學生添加新標簽。

問題：標簽在輸入后不會立即呈現在屏幕上。 它們只會在下拉菜單關閉並再次打開或連續輸入多個標簽后呈現。

項目和代碼可以在這里找到： 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>

應用程序.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);
  };

標簽.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

好的，因為您如何使用本地 state setNewTags，然后將道具傳遞給標簽，您會導致同步錯誤，因為反應狀態都是異步的。

因此，我將代碼更新為 useRef 以獲取當前值，它應該可以工作。

有很多很多的改變要做。 基本上你的代碼都搞砸了，因為你正在用另一個 state 更新 state。 （例如，您使用新標簽更新標簽），但新標簽尚未更新為新值。

我還在 App.js 中刪除了你的 useEffect，並向你展示了如何改用 useMemo。

刪除這兩行

  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'
        />

然后你的句柄提交 function

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

然后將此行更改為更新的行。

{學生?.tags?.length > 0 && }

然后您需要使用密鑰更新您的.map，否則無法正確渲染。

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

在您的更新 function

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])

改動太多了。 我可能在這里錯過了其中一些。 查看新沙盒