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

Question

In this App, student data is pulled from an API, new Tags can be added for each student by clicking the PLUS button on a card.

ISSUE: the tags DON'T render on the screen immediately after they are inputed. They will only render after the drop down is closed and opened again or if a number of tags are entered consecutively.

The project and code can be found here: 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>
  );
};

I've tried different ways to use useEffect to re-render the tags but have been unsuccessful thus far…

Thanks!

Answer 1

Okay because of how you setNewTags using local state, and then you passing props to Tags, you causing sync errors, since react states are all async.

So I updated the codes to useRef to get current values and it should work.

There's many many changes to be made. Basically your codes are all messed up because you are updating state with another state. (eg u updating tags with new tags), but newtags has not been updated with new value.

I've also removed your useEffect in App.js, and showed you how to useMemo instead.

Delete these 2 lines

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

Create new input Ref

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

Change input to this

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

then your handle submit function

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

then change this line to the updated line.

{student?.tags?.length > 0 && }

Then you need to update your.map with a key else it's not rendering correctly.

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

In your update 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);
  };

Update component to this

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

Add this to fix your accordion where input become hidden.

 useEffect(() => {

    if (setActive) setHeightState(`${content.current.scrollHeight}px`);

  },[props])

There's too many changes made. I may have missed out some of them here. see new sandbox