添加的 React 子組件沒有收到更新的值

Question

我正在嘗試通過按鈕將孩子添加到我的反應應用程序中，並通過單擊按鈕更新其值。 當我單擊按鈕時，“硬編碼”子級得到更新，但通過按鈕添加的子級沒有被更新。 我缺少一些基本的東西。

我嘗試將道具傳遞給孩子，假設 state 更新會傳播但它不起作用。 https://codepen.io/esoteric43/pen/YzLqQOb

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "Starting",
      children: []
    };
  }

  handleClick() {
    this.setState({ text: "Boom" });
  }

  handleAdd() {
    this.setState({
      children: this.state.children.concat(
        <Child1 key={1} text={this.state.text}></Child1>
      )
    });
  }

  render() {
    return (
      <div>
        <Child1 text={this.state.text}></Child1>

        {this.state.children}

        <button onClick={() => this.handleClick()}>Change</button>

        <button onClick={() => this.handleAdd()}>Add</button>
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <App />
);

要在上面的 codepen 鏈接中重現，請單擊添加，然后單擊更改。 添加的元素不會更新。 單擊更改按鈕時，應更新兩個子項。

Answer 1

您還必須在handleClick方法中使用map之前的 state 值：

handleClick() {
    this.setState((prevState) => ({
      ...prevState,
      children:
        prevState.children.length > 1
          ? [
              ...prevState.children
                .slice(0, prevState.children.length - 1)
                .map((_) => "Boom"),
              "Boom"
            ]
          : ["Boom"]
    }));
  }

檢查它在這個CodeSandbox上的工作。

Answer 2

您需要更新children中的最后一項。 您當前的解決方案會更新初始text 。

試試這樣：

 class App extends React.Component { constructor(props) { super(props); this.state = { text: "Starting", children: ["Starting"] }; } handleClick() { this.setState((prevState) => ({...prevState, children: prevState.children.length > 1? [...prevState.children.slice(0, prevState.children.length - 1), "Boom" ]: ["Boom"] })); } handleAdd() { this.setState({ children: this.state.children.concat( <Child1 key={1} text={this.state.text}></Child1> ) }); } render() { return ( <div> {this.state.children.map((child, index) => ( <div key={index}>{child}</div> ))} <button onClick={() => this.handleClick()}>Change</button> <button onClick={() => this.handleAdd()}>Add</button> </div> ); } } class Child1 extends React.Component { render() { return <div>{this.props.text}</div>; } } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Answer 3

你的意思是這樣的嗎？

 class App extends React.Component { constructor() { super() this.state = { children: [] } } handleAddClick = ()=>{ this.setState(prev=>({children:[...prev.children, `child ${this.state.children.length+1}`]})) } handleChangeClick=(item)=> { let draft = [...this.state.children]; draft[draft.findIndex(i=>i===item)]='boom'; this.setState({children: draft}); } render() { return( <div> <button onClick={this.handleAddClick}>Add child</button> { this.state.children.map(child=>(<Child onChange={this.handleChangeClick} title={child}/>)) } </div> ) } } class Child extends React.Component { render() { return <div> {this.props.title} <button onClick={()=>this.props.onChange(this.props.title)}>change me</button> </div> } } ReactDOM.render( <App />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"/>