React：如何打开新添加的手风琴项目？

Question

I got an accordion component in my React application. The user is able to add items to this accordion. Now, when the users clicks a button to add an item to the accordion, I would like for the newly added accordion item to automatically open. Here is a codesandbox displaying my problem .

To open and close the accordion, I use a bit of state: const [clicked, setClicked] = useState("0"); .

When an accordionItem is clicked, the following function gets called:

  const handleToggle = (index) => {
    if (clicked === index) {
      return setClicked("0");
    }
    setClicked(index);
  };

In my codesandbox demo, I use an array of question and answers as accordionItems and I loop through them. So I thought that all I had to do was just use the setClicked function to set the clicked state equal to the length of the faqs array minus 1 in order to open the right accordion, but that is not working like expected...

Answer 1

You have few problems.

One is you must use newFaq below (because state variable doesn't get updated immediately):

setClicked(newFaq.length - 1);

Second error you were getting when trying to access ref in render in style - since component was not committed to DOM yet, the ref was null. You will need something like this:

 React.useEffect(() => {
    setHeight(contentEl.current.scrollHeight);
 });

and use height in style

style={active ? { height } : { height: "0px" }}

Also I think this is redundant:

if (clicked === index) {
  return setClicked("0");
}

condition is never true.