Блог

Я опубликовал более простую версию этого, но понял, что мне нужно поделиться большим количеством кода, чтобы найти проблему. Итак, вот и все остальное. У меня есть компонент, состояние по умолчанию которого пусто, он переходит к дочернему компоненту, где вы отвечаете на вопросы как » Да » или «Нет», а затем он устанавливает состояние для этого ответа.

 constructor(props) {
        super(props);

        this.state = {
            isBoxChecked: " ",
        };
        this.handleCheck = this.handleCheck.bind(this);
        this.handleChangek = this.handleChange.bind(this);
    }
 

Это обработчик проверки и обработчик изменений(он изменяет значение состояния на «Да» или «Нет» и вызывает API для сохранения его в базе данных, и эта часть работает нормально).:

 handleCheck(e) {
    this.setState(({ isChecked }) => ({
      isChecked: !isChecked,
    }));
    this.setState({ [e.target.name]: e.target.checked }, () => this.updateDB());
  }

handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value }, () => this.updateDB());
    };
 

Вот называется мой дочерний компонент, у которого есть вопрос:

 <PersonnelFiles
       handleChange={this.handleChange}
       handleCheck={this.handleCheck}
    {...this.state}
 />
 

И это мой код дочерних компонентов(когда я нажимаю на ответ, он включается и сохраняет ответ в базе данных).:

 <Form.Group
                                    className="ml-3"
                                    name="formIsBoxChecked"
                                    as={Row}
                                    controlId="formIsBoxChecked"
                                    onChange={this.props.handleChange}
                                    >
                                        <Form.Label column sm={5}>
                                            1. Select Yes or No:
                                        </Form.Label>
                                        <Form.Check
                                            inline
                                            type="radio"
                                            label="Yes"
                                            value="yes"
                                            name="formIsBoxChecked"
                                            id="formIsBoxChecked-Yes"
                                            defaultChecked={
                                            this.props.formIsBoxChecked === "yes"
                                            }
                                        />
                                        <Form.Check
                                            inline
                                            type="radio"
                                            label="No"
                                            value="no"
                                            name="formIsBoxChecked"
                                            id="formIsBoxChecked-No"
                                            defaultChecked={
                                            this.props.formIsBoxChecked === "no"
                                            }                               
                                        />
                                        
                                </Form.Group>
 

However, when I reload the page, an API call does retrieve the values from the database, and setState to change the empty string to the correct answer. But the box that should be checked does not render as checked, unless I turn the component off and back on again. Why would this be? I’m doing text area’s the same way and they work as expected. But radio buttons and checkboxes do not.

 
componentDidMount() {
        this.grabTableData(tableName);
    }

async grabTableData (tableName) {
    await fetch(API_URL   `/${tableName}/${this.props.Id}`)
      .then((res) => {
        if (!res.ok) {
          throw new Error();
        }
        return res.json();
      })
      .then((result) => {
        this.setState({
          ...result[0],
        });
        console.log(result);
      })
      .catch((error) => {
        console.log(error);
      });
  }
 

Как я уже сказал, это действительно захватывает данные и правильно устанавливает состояния, просто затем не обновляет переключатели или флажки, как ожидалось, если я вручную не выключу и не включу рендеринг компонента вручную. Я делаю это, когда нажимаю кнопку.